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

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -