选择标签的占位符[重复]

Posted 2023-03-05

【中文标题】选择标签的占位符[重复]

【英文标题】：placeholder for select tag [duplicate]

【发布时间】：2013-07-10 07:06:28

【问题描述】：

是否可以在选择标签上使用占位符？

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

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

【问题讨论】：

在 select 上放置占位符是没有意义的 - 没有办法混淆可以选择的值，因为它们在元素中列出。唯一可能出现问题的情况是，如果您尝试使用占位符代替标签，规范规定您不应该这样做。

@Quentin，什么是规范或设计一致性？请看一下 Select2 插件，它允许设置很多很酷的东西以及占位符。它是选择框的 jQuery 替代品。 Herer是官方网站select2.github.io/examples.html

为什么不optgroup？查看答案：***.com/a/36265421/1320932

@Quentin 他想在选择中显示一个值，这实际上不是一个选择的值，告诉用户进行选择（当尚未进行选择时）。然后，当您进行选择（茶、咖啡或苏打水）时，占位符将替换为所选文本。

【参考方案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 是两个最安全的选择，其他 CSS 属性可能会被忽略。

在我的选项中，标记默认选项的最佳方式（在 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>

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

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

---

_{¹ 这个答案之前建议使用default 属性，该属性是非标准的，本身没有任何意义。²在技​​术上可以使用 javascript 根据所选值设置选择本身的样式，但这超出了这个问题的范围。但是，This answer 涵盖了这种方法。}

【讨论】：

伙计，HTML5 很蹩脚......不过还是谢谢你的回答。

这在 Safari 中没有任何作用。

这在 android 中没有任何作用 :-(

值得一提的是，这不再有效，[default] 不是真正的属性。 w3.org/TR/html-markup/option.html

@jnowland 我刚刚看到您的评论并相应地更新了答案。

【参考方案2】：

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

像这样添加一个选项：

<option default>Select Your Beverage</option>

正确方法：

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

【讨论】：

default 属性来自哪个 HTML 版本？

对不起，但 AFAIK 这完全是错误的。 “默认”在任何规范中都不是有效属性（HTML4 或 HTML5）

所以你没有错 - 但这确实/确实有效。我会更新我的答案，但否决票并不是真正必要的:)

我们也可以使用disabled selected hidden或仅hidden

别忘了添加 'value=""' - 它修复了使用某些框架（例如 AngularJS）时的许多错误

【参考方案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>

【讨论】：

简单有效。谢谢。

太棒了！解决了我的问题

【参考方案4】：

     <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>

【讨论】：

我真的不知道他们为什么给你否定，但这解决了我的问题

【参考方案5】：

是的，有可能

您可以仅使用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>

【参考方案6】：

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

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

    );

【讨论】：

我喜欢你的回答。但是 Select2 更好，因为 allowClear 选项，没有冒犯。 :)

这是一个很好的灵活性解决方案。未选择的选项显示为选择元素的占位符，然后在选择时显示为已完成的字段。我认为最好的选择。

这可以使用纯 JS 完成，无需 jQuery。

【参考方案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;

【讨论】：

这在 Safari 中没有任何作用。

【参考方案8】：

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

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

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

我特别喜欢 allowClear 选项。

谢谢。

【参考方案9】：

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

【讨论】：

嗨，欢迎来到 SO。请不要只是转储代码作为答案，请解释您的想法，以便用户更好地了解正在发生的事情。谢谢。

【参考方案10】：

试试这个

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;