How to bold the first option of a select across all browsers?
15,347
Solution 1
#htmldisabled:first-child{
font-weight:bold;
}
Solution 2
As you've discovered, it can't be done cross-browser ;)
Best to use a selectbox replacement script if you need special formatting or display
Solution 3
To my knowledge it doesnt work in IE unless you style the select
tag:
select{
font-weight:bold;
}
However this will influence all options. I dont know of another css-only solution, but would be interested in one as-well :)
Author by
Mr.T.K
I am web designer. Having good experience in CSS, Html, Photoshop and jquery Note: I'm ready to do freelance job. My contact Email: [email protected]
Updated on June 16, 2022Comments
-
Mr.T.K almost 2 years
I have tried to bold the first option of the select box but it's only working in Firefox, not other browsers (Chrome, IE). Here is the code I've tried.
HTML
<select id="htmldisabled"> <option class="bold">test1</option> <option>test2</option> <option>test3</option> <option>test4</option> <option>test5</option> <option>test6</option> </select>
CSS
.bold { font-weight:bold; }
See demo at jsfiddle.
-
Ash Burlaczenko over 12 yearsThis doesn't work is IE either. Please test answers before post unless your certain they work.
-
Mr.T.K over 12 yearsnot working in firefox and ie. In firefox all option are bold.
-
Mr.T.K over 12 years@anglimass please look at OP. I need to bold the first option of the select box, not applying color.