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

your code is working in firefox and IE but not in chrome do you want it in to be run in crome also? — Mudassar Saiyed, Oct 21 '15 at 12:35
Yes , I am looking for a solution to work on chrome,IE , and firefox . — user3584982, Oct 21 '15 at 12:42
will it ok for you if you can change the color instead of underline...because color are supported in chrome and all browsers.. — Mudassar Saiyed, Oct 21 '15 at 13:06
text-decoration doesn't work would you like to try some thing else.. — Mudassar Saiyed, Oct 21 '15 at 13:20

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

Typically you cannot style option elements. However there are some plugins/hacks which can be used, but you cannot be sure they will be compatible across all platforms.

Refer this answer How to style the option of a html "select"?

edited May 23 '17 at 12:14

Community

1
1

answered Oct 21 '15 at 12:41

ExpectoPatronum

507
4
14

Just wanted to point out the same with a different thread: http://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css – Marco Hengstenberg Oct 21 '15 at 12:42

score 1 · Accepted Answer · answered Oct 21 '15 at 13:01

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

Why are you using jquery and jquery-ui to solve this problem? Isn't this a lot of overhead for only adding an underline? I know it's impossible without Javascript but a library + dependencies still is a lot of data. — Marco Hengstenberg, Oct 21 '15 at 13:07
@MarcoHengstenberg: I agree with your point external plug-in do increase overhead as well dependencies but I will be more convinced if you have some optimal solution for OP. Using Jquery library is not bad even most professional programmers do prefer external libararies. What if OP is using Jquery libraries since it hasn't been mentioned **DON'T USE JQUERY**. — Suprabhat Biswal, Oct 21 '15 at 13:20

score 0 · Answer 3 · answered Oct 21 '15 at 12:51

While it is possible to style <select> elements and <option> elements with a few hacks in the HTML or by throwing Javascript on those, I would never recommend doing so.

Accessibility is always an issue on the web and by turning this standardized method of an input (users can select an option) into something completely different just for visual appeal, you won't help the user.

There are a few people who have written about this subject and I agree with all of them: "Leave the select alone. Style what's styleable if you have to." https://www.aaron-gustafson.com/notebook/native-vs-stylable-tug-of-war/

If you still want to style the select (not the options, that's impossible with CSS alone), there is a wonderful library by FilamentGroup you can just throw into your project: https://github.com/filamentgroup/select-css/

Html Select option Underline

3 Answers3

Linked