Issue
Hi there wonderful people. I have a question, it may be only related to firefox but, how do I change the color of the selected <option> when the focus is in and out of the <select>? I don't mean on :hover that works fine I'm talking when you click on a <option> and after that when you click out of the <select> object.
The intention is to change the background-color/color of the selected <option> when the <select> is in focus or not in focus. In Firefox it shows in windows system blue/white with dotted outline and in Chrome is showing in a lightb blue/white on focus and white/grey on out of focus... I don't want that.
CSS
.select_style{
background-color: #555;
}
.select_style option{
background-color: #ccc;
}
.select_style option:hover{
background-color: #0f0;
}
HTML
<select class="select_style" size='3' multiple='multiple'>
<option value="">Please choose</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Solution
This made the trick, remember the code is using a a "selectbox" <select> with the attribute multiple it does't act as the normal "droplist" <select>.
CSS
option:checked{
background: #00ff00 !important;
box-shadow: 0 0 10px 100px #00ff00 inset;
}
Answered By - Cranky Unicorn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.