html - css - Revert select to normal state when mouse is out -
html code:
<select id="dict"> <option value="1">google.com</option> <option value="2">thefreedictionary.com</option> <option value="3">dictionary.reference.com</option> <option value="4">merriam-webster.com</option> <option value="5">macmillandictionary.com</option> <option value="6">oxforddictionaries.com</option> <option value="7">collinsdictionary.com</option> </select>
css code:
#dict { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #eee; border-style: solid; border-color: #646464; padding-left: 1.5px; padding-right: 1.5px; margin-left: 0px; border-width: thin; width: 263.5px; } #dict:hover { border-color: #06f; color: #06f; } #dict:focus { outline: none; border-color: #093; color: #093; }
fiddle. creates select
dropdownlist rounded corners.
the problem that, when click on dropdownlist (and options appear) , click again (get options disappear) , move mouse away dropdownlist, color of text , border of dropdownlist still green.
how fix it?
also, realised when dropdownlist clicked,
select
turns green, options turn green too. how make options not change colour when dropdownlist clicked? in advance.
edit: also, how make such text of selected option appears red?
add in css
option { color:#000000; }
edit
i never did guess can achieve
option[selected=selected]{ color:red; }
Comments
Post a Comment