【问题标题】:How to style HTML select option hover and selected option effects如何设置 HTML 选择选项悬停和选定选项效果的样式
【发布时间】:2019-01-09 17:57:27
【问题描述】:
我正在尝试删除 HTML 选择选项悬停效果上的默认蓝色背景,并使用下面的 CSS 块设置所选选项效果的样式,但它似乎不起作用。关于如何实现这一点的 Ant 想法。
select.color-chooser option:hover {
background-color: none!important;
}
select.color-chooser option[selected] {
background-color: none!important;
}
【问题讨论】:
标签:
javascript
jquery
css
sass
css-selectors
【解决方案2】:
解决方案仅适用于 IE(选中 10 和 11)
`
<select class="form-control">
<option>Option option option</option>
<option>Option option option</option>
<option>Option option option</option>
</select>
.form-control option:hover {
background: pink;
}
::selection, select:focus::-ms-value {
background-color: deeppink;
color: #000;
}
option:checked {
background-color: deeppink;
color: #000;
}
option:checked:hover, select:focus option:checked:hover {
background-color: deeppink;
color: #000;
}
`
https://jsbin.com/mejivij/2/edit?html,css,js,output
【解决方案3】:
我还没有尝试过,但我想不到,不应该是 option:selected 吗?
select.color-chooser option:selected {}
【解决方案4】:
要更改链接上的默认文本颜色为蓝色,请使用以下代码:
a {
text-decoration:none;
}
要更改悬停颜色,这应该可以:
a:hover {
color:[enter colour];
}