select标签的占位符

是否有可能在select标签上占位符？

<select placeholder="select your beverage"> <option>Tea</option> <option>coffee</option> <option>soda</option> </select> 

或者可能是一个可能的工作？

Answer 1

编辑：这个在我写的时候确实有用，但正如Blexen指出的那样，这不是规范。

添加一个选项，如下所示：

 <option default>Select Your Beverage</option> 

正确的方法是：

 <option selected="selected">Select Your Beverage</option> 

Answer 2

根据Mozilla开发者networking ， placeholder不是<select>input中的有效属性。

相反，添加一个空value和selected属性的选项，如下所示。 空value属性是强制性的，以防止使用<option>的内容作为<option>的值的默认行为。

 <select> <option value="" selected>select your beverage</option> <option value="tea">Tea</option> <option value="coffee">Coffee</option> <option value="soda">Soda</option> </select> 

在现代浏览器中，向<select>元素添加required属性将不允许用户提交元素所属的表单，如果所选选项具有空值。

如果要在列表中设置默认选项（单击元素时显示） ，则可以使用有限数量的CSS属性。 color和background-color是最安全的两个赌注，其他CSS属性可能会被忽略。

在我的select中，标记默认选项的最佳方式（在HTML5中）是使用自定义data-*属性。 ¹以下是如何将默认选项设置为灰色的方式：

 select option[data-default] { color: #888; } 

 <select> <option value="" selected data-default>select your beverage</option> <option value="tea">Tea</option> <option value="coffee">Coffee</option> <option value="soda">Soda</option> </select> 

Answer 3

 <select> <option selected="selected" class="Country">Country Name</option> <option value="1">India</option> <option value="2">us</option> </select> 

 .country { display:none; } </style> 

Answer 4

这是我select框占位符的function。

HTML

 <select name="country" id="country"> <option value="" disabled selected>Country</option> <option value="c1">England</option> <option value="c2">Russia</option> <option value="c3">USA</option> </select> 

jQuery的

  jQuery(function($) { /*function for placeholder select*/ function selectPlaceholder(selectID){ var selected = $(selectID + ' option:selected'); var val = selected.val(); $(selectID + ' option' ).css('color', '#333'); selected.css('color', '#999'); if (val == "") { $(selectID).css('color', '#999'); }; $(selectID).change(function(){ var val = $(selectID + ' option:selected' ).val(); if (val == "") { $(selectID).css('color', '#999'); }else{ $(selectID).css('color', '#333'); }; }); }; selectPlaceholder('#country'); }); 

Answer 5

对的，这是可能的

您只能使用HTML来完成此操作您需要设置默认select选项disabled=""和selected=""并selecttag required="" 。 浏览器不允许用户在未select选项的情况下提交表单。

 <form action="" method="POST"> <select name="in-op" required=""> <option disabled="" selected="">Select Option</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="submit" value="Submit"> </form> 

Answer 6

有一个Select2插件允许设置很多很酷的东西以及占位符。 这是一个jQuery替代select框。 这是一个官方网站https://select2.github.io/examples.html

事情是 – 如果你想禁用奇特的search选项，请使用下面的选项设置。

 data-plugin-options=' { "placeholder": "Select status", "allowClear": true, "minimumResultsForSearch": -1 } 

特别是我喜欢allowClear选项。

谢谢。

Answer 7

没有必要采取任何javscript或任何方法，你可以做你的HTML CSS

HTML

 <select id="myAwesomeSelect"> <option selected="selected" class="s">Country Name</option> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> 

CSS

 .s { color:white; font-size:0px; display:none; } 

Answer 8

  <select> <option value="" disabled selected style="display: none;"> placeholder</option> <option value="op1">op1</option> <option value="op2">op2</option> <option value="op3">op3</option> <option value="op4">op4</option> </select> 

Answer 9

尝试这个

HTML

 <select class="form-control"name="country"> <option class="servce_pro_disabled">Select Country</option> <option class="servce_pro_disabled" value="Aruba" id="cl_country_option">Aruba</option> </select> 

CSS

 .form-control option:first-child { display: none; } 

Answer 10

 <select> <option disabled selected>select your beverage</option> <option >Tea</option> <option>coffee</option> <option>soda</option> </select>