html - 保持所选选项中的文本颜色

Question

我创建了一个 HTML 表单，其中包含“程序”、“单位”、“位置”的 3 个单独下拉菜单，我希望所选选项文本在选中时保持文本颜色(默认为黑色)。

有 20 多个元素、100 多个单元、60 多个地点。程序颜色匹配相应的单元和位置颜色。

这将使表单用户更容易找到选择并在提交前验证选择。 (颜色匹配吗？)

<p>
    <label for="name">Program: </label>
    <select type="list" name="Program">
        <option style="color:#000000">Select One</option>
        <option style="color:#FF0000">Select One</option>
        <option style="color:#000099">Select One</option>
    </select>
</p>

Answer 1

我会为此使用 jQuery:参见 http://jsfiddle.net/n9bzwy8m/1/

创建一个每次选择更改时运行的函数，并根据新选择的值更改颜色。

jQuery:

var select = $('#program');

select.change(function() {
    if (select.val() == "One") {
        select.css('color','#000000');
    }
    else if (select.val() == "Two") {
        select.css('color','#ff0000');      
    }
    else {
        select.css('color','#00ff00');
    }
});

HTML(我刚刚将 #program 的 id 添加到您的 select 元素):

<p>
    <label for="name">Program: </label>
    <select type="list" name="Program" id="program">
        <option style="color:#000000">One</option>
        <option style="color:#FF0000">Two</option>
        <option style="color:#000099">Three</option>
    </select>
</p>

CSS:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

上面的 CSS 从 select 元素中删除了默认的浏览器样式，我认为这可能是您遇到的颜色默认为黑色的问题。然后，您可以将自己的样式添加到 select - padding、border-radius、border、背景等