选择标记的占位符

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-*属性.¹以下是如何将默认选项设置为灰色样式:

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;CSS规则<option>,但请记住,这不会阻止用户选择它(使用例如箭头键/打字),这只是使它他们更难做到这一点.

_{¹此答案之前建议使用default非标准属性并且本身没有任何意义.
²技术上可以使用JavaScript根据所选值设置选择本身的样式,但这超出了本问题的范围.然而,这个答案涵盖了这种方法.}

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

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

Answer 5

对的，这是可能的

您仅可以使用此功能。HTML您需要设置默认的select选项disabled=""，selected=""然后选择tag 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>