使用css没有为“选择”选择任何内容时如何设置默认提示答案

【问题标题】：how to set a default prompt when nothing selected for "select" using css使用css没有为“选择”选择任何内容时如何设置默认提示
【发布时间】：2018-09-25 11:58:45
【问题描述】：

是否可以在使用 css 为选择框选择任何内容时设置默认提示？还是有一种优雅的方式来处理这个问题，而不是

 <option>Select Here</option>?

【问题讨论】：

这能回答你的问题吗？ How do I make a placeholder for a 'select' box?

标签： html css

【解决方案1】：

试试这个：

<select>
    <option value="" disabled>Select one--</option>
    <option value="someVal1">Option 1</option>
    <option value="someVal2">Option 2</option>
    <option value="someVal3">Option 3</option>
    <option value="someVal4">Option 4</option>
</select>

【讨论】：

“它们只能存在于 <select> 元素中这一事实导致许多人认为它们更像是属性，而不是元素，以保持事物兼容并遵循最佳实践”。您对<option> 元素的想法不会影响您的代码的兼容性，“最佳实践”是一个毫无意义的短语。
另外，您可以添加selected="selected" 使其也成为默认值。如果值被更改，它将无法更改回
disabled does not allow for validation to occur，并保持select 有效。这个答案部分不正确。编辑答案。
这个没用，加载时初始提示没有选择
@SuperUberDuper OP 专门询问如何在加载时未选择任何内容时设置默认提示。此解决方案利用默认浏览器功能，在未选择任何选项时显示第一个选项的文本。既然是默认值，我推断默认不应该选择该值。如果您希望它被选中，请将它与 cadlac 的评论结合起来并享受。简单地将解决方案称为“无用”是不正确的、粗鲁的，坦率地说有点粗鲁。

【解决方案2】：

接受的答案没有像预期的那样对我有用。

如果您需要默认选择“选择一个选项”，这对我有用

<select id="selected_option" name="selected_option">
     <option value="default" selected="selected">Select one option </option>
     <option value="someVal1">Option 1</option>
     <option value="someVal2">Option 2</option>
     <option value="someVal3">Option 3</option>
     <option value="someVal4">Option 4</option>
</select>

select 具有 id 和 name 也很重要，因此当您提交表单时，该值将成为 POST 或 GET 的一部分

【讨论】：

不需要id，名字就够了。
如果使用<label for="selected_option">Label Text</label>，则需要id
这应该是公认的答案，它对我来说应该有效
select 就是这么一个破组件
html5 验证如何强制选择具有非默认值？

【解决方案3】：

                        <select>
                            <option style="display:none">Empty</option>
                            <option>button1</option>
                            <option>button2</option>
                        </select>

【讨论】：

这个结合disabled是完美的
但是如果我们想手动选择提示选项，我们与它无关。

【解决方案4】：

尝试使用未设置值的选项

<select>    
    <option value>Select something</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
</select>

【讨论】：

这对我不起作用，因为它不显示“选择某些东西”。默认选择的选项是一个空文本

【解决方案5】：

这是我用来设置默认提示的方式，但它不会设置默认值。它使用 HTML5 验证 required。这可能与问题有点不同，但我希望它可以作为替代方案有所帮助。

<select id="car" name="car[brand]" required>
  <option disabled selected>Select Car Brand</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

【讨论】：