如何将html中下拉菜单的默认高亮颜色从蓝色更改为其他颜色<select><option>标签
[英]How to change the default highlight color of drop down in html from blue to some other color for <select><option> tag
问题描述
How to change the default highlight color of drop down in HTML from blue to some other color for <select><option> tags, using some CSS properties or from Javascript?
如何使用某些 CSS 属性或从 Javascript 将 HTML 中下拉菜单的默认高亮颜色从蓝色更改为<select><option>标记的其他颜色？
The requirement is I have to use the <select> <option> tags only.要求是我必须只使用<select> <option>标签。 I tried the code below, but it didn't work for me:我尝试了下面的代码，但它对我不起作用：
<html>
<head>
<title>Dropdown Colour</title>
<style type="text/css">
option:hover {
background:#C6C4BD;
}
</style>
</head>
<body>
<select>
<option>Shell</option>
<option>Cabbage</option>
<option>Beans</option>
<option>Cheese</option>
<option>Clock</option>
<option>Monkey</option>
</select>
</body>
</html>
3 个解决方案
解决方案1
0 2013-10-10 07:39:59
尝试设置选择的轮廓和/或边框属性。
select{outline:1px solid green;border:1px solid black;}
解决方案2
0 2013-10-10 09:33:21
Currently there is no way I know of that this can be accomplished using only CSS.目前我不知道这可以仅使用 CSS 来完成。
However, using jQuery I was able to achieve a similar effect.但是，使用 jQuery 我能够达到类似的效果。
Your dropdown changes because i have to set the size of the select element which makes it look like a list-box.您的下拉列表发生变化，因为我必须设置选择元素的大小，使其看起来像一个列表框。 Maybe somebody can improvise on this.也许有人可以即兴发挥。
Here is the jQuery i used这是我使用的 jQuery
$(document).ready(function (event) {
$('select').on('mouseenter', 'option', function (e) {
this.style.background = "limegreen";
});
$('select').on('mouseleave', 'option', function (e) {
this.style.background = "none";
});
});
解决方案3
0 2017-05-23 05:35:17
Try to change like this, hope it may help you试着改成这样，希望对你有帮助
select option{
background: red;
color: #fff;
outline:1px solid green;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.