Question

我创建了一个HTML表单，其中包含3个单独的下拉菜单，用于＆＃34;程序＆＃34;，＆＃34;单元＆＃34;，＆＃34;位置＆＃34;，我希望选择的选项文本保持不变选中时的文本颜色（默认为黑色）。

有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元素中添加了select的ID：

<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，background等。

在所选选项中保持文本颜色

1 个答案: