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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

由于本主题中提供的答案之间的样式和功能不同,下表阐明了所提供的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          |

其他回答

我刚刚偶然发现了这个问题,下面是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:

在这里,我修改了大卫的答案(接受的答案)。在他的回答中,他将禁用和选定属性放在选项标签上,但当我们也放置隐藏标签时,它看起来会更好。

通过在选项标签上添加额外的隐藏属性,它将防止在选择“Durr”选项后重新选择“Select your option”选项。

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

纯JavaScript解决方案,允许用户在未选择值时仅通过禁用选项来重置字段。

我不喜欢仅仅禁用该选项的方式(尽管这确实是一个非常简单的解决方案)。但我需要重置选择框。所以我在下面创建了一个简单的JavaScript解决方案。

在HTML代码中,您只需执行以下操作:

<select name="animal">
    <option class="placeholder">Animal</option>
    <option value="1">Mouse</option>
    <option value="2">Cat</option>
</select>

要实现这一点,只需在HTML正文末尾的脚本块中包含以下代码即可。

(function () {
    const selectboxPlaceholderOptions = document.querySelectorAll('select option.placeholder');

    function selectBoxChange(event) {
        const select = event.srcElement;
        const placeholderOption = event.srcElement.querySelector('option.placeholder');
        if (!placeholderOption)
            return;

        if (!select.value || select.value === '') {
            placeholderOption.disabled = true;
            placeholderOption.textContent = placeholderOption.dataset['placeholderText'];
        } else {
            placeholderOption.disabled = false;
            placeholderOption.textContent = '';
        }
    }

    for (let i = 0; i < selectboxPlaceholderOptions.length; i++) {
        const option = selectboxPlaceholderOptions[i];
        const select = option.parentElement;

        option.value = '';
        option.disabled = true;
        option.dataset['placeholderText'] = option.textContent;
        select.addEventListener("change", selectBoxChange);
    }
})();

将类占位符分配给占位符选项后,一切都完成了。JavaScript与页面加载结束前可用的每个选择框一起工作。

基于Albireo的响应,该版本不使用jQuery,CSS的特异性更好。

const triggerEvent=(el,eventName)=>{let event=document.createEvent('HTMLEvents')event.initEvent(eventName,true,false)el.dispatchEvent(事件)}let select=document.querySelector('.placeholder select')select.addEventListener('change',(e)=>{e.target.classList[e.target.value==0?'add':'remove']('empty')})triggerEvent(选择,“更改”)占位符选择选项{颜色:#000000;}占位符选择选项:第一个子项{颜色:#444444;字体样式:斜体;字号:粗体;}.占位符-选择为空{颜色:#7F7F7F;}<select class=“placeholder select”><option value=“0”selected=“selected”>选择</选项><option value=“1”>有些东西</option><option value=“2”>其他内容</option><option value=“3”>另一个选项</option></选择>

非CSS-无JavaScript/jQuery答案:

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

更新(2021 12月):

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