在选择菜单中更改选项颜色

时间:2015-08-12 06:35:58

标签: html css html5

这可能是基本但我不能让这个工作。在我的提交表单中,我有一个选择菜单。我已禁用第一个选项并将其值设置为空。

public void log(int logLevel, Supplier<String> msg) {
    if (logLevel >= currentLogLevel) {
        // print the log to file like out.println(msg.get());
    }
}

// calling
log(2, () -> "text1" + var1 + "text2");

如何将禁用选项的文本设为<select name="types"> <option value="" disabled selected>Please select<option> <option value="Fruit">Mangos</option> <option value="Veggies">Beans</option> </select> ?基本上我需要它看起来像占位符文本一样。

3 个答案:

答案 0 :(得分:2)

尝试使用 css 为选择列表的first child添加颜色,如下所示

<style>    
select option:first-child {
        color : #F60F60;
    }
</style>

希望有所帮助

答案 1 :(得分:2)

请尝试以下操作: Demo

select option:disabled {
    color: #f60 !important;    
}

HTML:

<select  name="types">
    <option value="" selected disabled="disabled">Please select</option>
    <option value="Fruit">Mangos</option>
    <option value="Veggies">Beans</option>
</select>

答案 2 :(得分:0)

您需要在选项标记上添加背景颜色而不是选择标记...

select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);

}

如果要为每个选项标签设置样式..请使用css属性选择器:

   select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

select option[val="1"]{
    background: rgba(100,100,100,0.3);
}

select option[val="2"]{
    background: rgba(200,200,200,0.3);
}

...