我有一个< 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>
谢谢.
解决方法
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>
