css - 无法使第一个 <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>