84

是否可以在选择标签上放置占位符？

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

或者可能是一个可能的解决方法？

4

10 回答 10

92

根据Mozilla Dev Network，placeholder不是<select>输入的有效属性。

相反，添加一个带有空属性的选项value，selected如下所示。emptyvalue属性是强制性的，以防止默认行为是将 的内容<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>

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

如果您想对列表中的默认选项（单击元素时出现）设置样式，则受支持的 CSS 属性数量有限。color并且background-color是 2 个最安全的选择，其他 CSS 属性可能会被忽略。

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

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>

但是，这只会设置下拉列表中的项目的样式，而不是输入中显示的值。如果您想使用 CSS 设置样式，请<select>直接定位您的元素。在这种情况下，您只能随时更改当前选定元素的样式。2

如果您想让用户选择默认项目稍微困难一些，您可以在display: none;上设置 CSS 规则<option>，但请记住，这不会阻止用户选择它（例如使用箭头键/键入），这只会使它他们更难做到这一点。

1该答案先前建议使用default非标准且本身没有意义的属性。
2在技术上可以使用 JavaScript 根据所选值设置选择本身的样式，但这超出了本问题的范围。但是，此答案涵盖了此方法。

于 2013-07-11T20:44:59.227 回答
50

编辑：这在我写它的时候确实/确实有效，但正如 Blexen 指出的那样，它不在规范中。

添加一个像这样的选项：

<option default>Select Your Beverage</option>

正确的方法：

<option selected="selected">Select Your Beverage</option>
于 2013-07-11T20:40:03.387 回答
16 
<select>

    <option selected="selected" class="Country">Country Name</option>

    <option value="1">India</option>

    <option value="2">us</option>

</select>


.country
{


    display:none;
}

</style>
于 2014-02-01T05:41:29.747 回答
10 
     <select>
         <option value="" disabled selected hidden> placeholder</option>
         <option value="op1">op1</option>
         <option value="op2">op2</option>
         <option value="op3">op3</option>
         <option value="op4">op4</option>
     </select>
于 2016-02-08T09:18:26.447 回答
8

是的，有可能

您可以仅使用HTML您需要设置默认选择选项disabled=""和selected=""选择标签来执行此操作required=""。浏览器不允许用户在未选择选项的情况下提交表单。

<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>
于 2016-04-20T11:49:32.393 回答
4

这是我的选择框占位符的功能。

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');

    });
于 2015-05-14T10:06:21.140 回答
1

无需采用任何 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;
}
于 2013-10-09T11:32:13.197 回答
1

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

问题是 - 如果您想禁用花哨的搜索选项，请使用以下选项集。

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

特别是我喜欢 allowClear 选项。

谢谢你。

于 2015-10-09T03:28:40.093 回答
-3 
<select>
   <option disabled selected>select your beverage</option>
   <option >Tea</option>
   <option>coffee</option>
   <option>soda</option>
</select>
于 2016-04-01T10:29:33.640 回答
-4

试试这个

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;
}
于 2016-03-23T05:43:10.487 回答