我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

以下解决方案也适用于Firefox,无需任何JavaScript:

选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>

其他回答

我刚刚偶然发现了这个问题,下面是Firefox和Chrome的工作原理(至少):

<style>选择:无效{颜色:灰色;}</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开(大多数阀门都这样做)</option><option value=“1”>通电时关闭,断电时自动打开</option></选择></form>

禁用选项可停止使用鼠标和键盘选择<option>,而仅使用“display:none”允许用户仍然通过键盘箭头进行选择。“display:none”样式只是让列表框看起来“不错”。

注意:在“占位符”选项上使用空值属性允许验证(必需属性)绕过“占位符”,因此如果选项未更改,但是必需的,则浏览器应提示用户从列表中选择一个选项。

更新(2015年7月):

确认此方法在以下浏览器中有效:

谷歌Chrome-v.43.0.2357.132Mozilla Firefox-第39.0版Safari-v.8.0.7(占位符在下拉列表中可见,但不可选择)Microsoft Internet Explorer-v.11(占位符在下拉列表中可见,但不可选择)Project Spartan-v.15.10130(占位符在下拉列表中可见,但不可选择)

更新(2015年10月):

我删除了style=“display:none”,改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性:在Safari、Internet Explorer和(Project Spartan需要检查)中都没有,在下拉列表中该选项可见,但不可选择。

更新(2016年1月):

当需要select元素时,它允许使用:invalid CSS伪类,该类允许您在select元素处于“占位符”状态时设置其样式。:由于占位符选项中的值为空,因此此处无效。

设置值后,将删除:invalid伪类。如果您愿意,也可以选择使用:valid。

大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效;在某些情况下,例如(Mac在Chrome/Safari中),您需要更改选择框的默认外观,以便显示某些样式,例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。

Chrome中的原生元素外观Mac:

在Chrome中使用更改的边框元素Mac:

非CSS-无JavaScript/jQuery答案:

<label>选项名称<选择><option value=“”disabled selected>选择您的选项</option><option value=“hurr”>Durr</option></选择></label>

更新(2021 12月):

这适用于最新的Firefox、Chrome和Safari。正如评论中指出的那样,它过去不适用于许多浏览器。

为选择元素输入[type=“text”]样式占位符

以下解决方案模拟占位符,因为它与input[type=“text”]元素相关:

$('.example').change(函数(){$(this).css('color',$(this).val()=='?'#999' : '#555');});.示例{颜色:#999;}.example>选项{颜色:#555;}.example>选项[value=“”]{颜色:#999;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>

HTML中有Cool属性,您可以使用它为select属性创建占位符在我的情况下,我使用以下代码,您可以根据您的要求更改它

 <select ref={relationship} required className="sellertype">
          <option value="" disabled selected hidden>Select Your Seller Type</option>
          <option value="1">Importer</option>
          <option value="2">Exporter</option>
          <option value="3">Local Seller</option>
          <option value="4">Local Buyer</option>
        </select>

现在“选择卖家类型”将作为占位符

由于本主题中提供的答案之间的样式和功能不同,下表阐明了所提供的HTML、HTML+CSS和HTML+CSS+Javascript解决方案的样式和适用的表单逻辑。

我不得不使用代码格式,因为出于某种原因,标记中不允许使用表。将使用代码段提供一个HTML表来解决表限制。

我将这篇文章标记为社区维基,这样任何人都可以详细介绍新的文章,但请将JQuery、React、Angular、CoffeeScript等添加到另一篇文章中,以保持此表的简单。

         | Technologies |                                                                Styling                                                                |
  Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |
   ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |