Html Select option Underline

Question

I am stuck with a problem to underline a element in html

Please find the code here :

<select>
    <option>select</option>
    <option style="text-decoration: underline;">one </option>
    <option>two</option>
    <option>three</option>
</select>

jsFiddle

Answer 1

When it comes to cross browser most of css can't be applied to native controls like select in this case. Alternate way is to use jquery-ui instead behind scene they hide select element and show a look a like usually they are either <ul>/<li>,<span> or <div>. Through css you can change it's look and feel too.

Prerequisite:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> /*Jquery Library*/
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> /*Jquery UI Library*/
<script src="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"></script> /*Jquery UI CSS*/

HTML MarkUp:

<select>
    <option>select</option>
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>

Javascript:

$(document).ready(function(){
     $('select').selectmenu();
})

StyleSheet (CSS):

li, span
{
    text-decoration: underline;  
}

.ui-selectmenu-button{
    width:150px !important;
}

JSFiddle Demo: Working Demo