Style HTML selected value in a select box
css, forms, html, select
Solution
Unfortunately what you ask is not possible by using pure CSS. However, here is something similar that you can choose as a work around.
Check the live code http://jsfiddle.net/Etr4F/
HTML:
<div>
Select
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
CSS:
div {
margin: 10px;
padding: 10px;
border: 2px solid purple;
width: 200px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
cheers!!
Problem
I already searched everywhere for this and haven't find it anywhere. Starting to think it's not doable. My Question is this: Is it possible to style with CSS, the selected value of a select box? I'm using this code with the class pretty-select to style the entire select box! ``` <div class="pretty-select"> <select name="city" class="city"> <option value="Porto" selected="selected">Porto</option> <option value="Penafiel">Penafiel</option> <option value="Lisboa">Lisboa</option> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> </select> </div> ``` Thanks for yout time! Cheers