无法使第一个<option>不可见

Question

我有一个<select>并且希望第一个选项是隐形的,因为移动版本上的文本没有足够的空间而且它无论如何都会被切断,所以我决定让它消失但它不会工作.仅适用于其他选项(在PC浏览器上),但不适用于第一个选项.这是为什么？

这是我已经尝试过的

CSS:

option:first-child {
    color: transparent;
}

HTML:

<select>    
    <option value="">Please select</option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
</select>

谢谢.

Answer 1

option:first-child{
	display: none;
}

<select> 
	<option disabled value>Please select</option> 
	<option value="1">1</option>    
	<option value="2">2</option>    
	<option value="3">3</option>    
</select>

使用 javascript（最好的方法）

(function(){
  document.getElementById("first").text = "";
})()

<select id="mySelect"> 
  <option value id="first">Please select</option> 
  <option value="1">1</option>    
  <option value="2">2</option>    
  <option value="3">3</option>    
</select>

如果您只想在移动设备中隐藏第一个选项，请按照此操作

(function(){
	var window_width = $(window).width();
	if(window_width < 480){
		document.getElementById("first").text = "";
	}
})()

<select id="mySelect"> 
	<option value id="first">Please select</option> 
	<option value="1">1</option>    
	<option value="2">2</option>    
	<option value="3">3</option>    
</select>
<p>This will hide only in mobile screen</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Answer 2

你可以将它设置为display: none;只有问题,它在Internet Explorer中不起作用(惊喜!)

或者只是<option>留空......

Answer 3

这是一个适合你的工作笨蛋.将其更改为CSS display:none并添加select到CSS

要么

您可以使用visibility: hidden;而不是display:noneCSS

select option:first-child {
   display:none;
}

    <select> 
        <option value="">Please select</option> 
        <option value="1">1</option>    
        <option value="2">2</option>    
        <option value="3">3</option>    
       </select>

Answer 4

我认为你不需要为此添加任何CSS.如果您需要将第一个选项设为空白,请删除Please Select .ie,

<select> 
    <option value=""></option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
 </select>

如果你想在框内有一些间距,即使删除了文本,你也可以添加几次以使面板足够宽,如下图所示.

<select> 
    <option value="">&nbsp;&nbsp;&nbsp;&nbsp;</option> 
    <option value="1">1</option>    
    <option value="2">2</option>    
    <option value="3">3</option>    
 </select>