How to change the default highlight color of drop down in html from blue to some other color for <select><option> tag
Question
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?
The requirement is I have to use the <select> <option> tags only. 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 answers
solution1
0 2013-10-10 07:39:59
尝试设置选择的轮廓和/或边框属性。
select{outline:1px solid green;border:1px solid black;}
solution2
0 2013-10-10 09:33:21
Currently there is no way I know of that this can be accomplished using only CSS.
However, using jQuery I was able to achieve a similar effect.
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
$(document).ready(function (event) {
$('select').on('mouseenter', 'option', function (e) {
this.style.background = "limegreen";
});
$('select').on('mouseleave', 'option', function (e) {
this.style.background = "none";
});
});
solution3
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.