Question

是否可以在选择标记上添加占位符？

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

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

Answer 1

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

而是添加一个空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>

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

如果要在列表（单击元素时出现）中设置默认选项的样式，则可以很好地支持有限数量的CSS属性。 color和background-color是最安全的2个投注，其他CSS属性可能会被忽略。

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

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>元素。在这种情况下，您只能随时更改当前所选元素的样式。²

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

_{¹此答案之前建议使用非标准的default属性，并且它本身没有任何意义。

²技术上可以使用JavaScript根据所选值设置选择本身的样式，但这超出了本问题的范围。但是，This answer涵盖了这种方法。}

Answer 2

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

添加如下选项：

<option default>Select Your Beverage</option>

正确的方法：

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

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

是的可能

您只能使用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>

Answer 5

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

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 6

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

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

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

特别喜欢allowClear选项。

谢谢。

Answer 7

无需使用任何javascript或任何方法，只需使用您的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>

选择标记的占位符

10 个答案: