Option in select cant be styled?

HTML & CSS
1 
<select class="title_select minimal">
					<option style="font-weight:bold;">Other Plugins</option>					
</select>

This doesn’t work?
Is there no way to style the option in select?

2

It will work in some browsers and not others so there is no way to consistently apply styles to a select element and its options.

I believe your code above will work in Chrome but possibly not anywhere else.

You can add headings in selects using the optgroup element but generally used for a group of items and of course you are stuck with the ua styling in most cases.

3 Likes
3

We really should be thankful for small mercies. :rofl:

Every little helps, when we are faced with the uphill
struggle of keeping the “Arty-Farty” brigade at bay. :banghead:

coothead

3 Likes
4

I’ve checked it on safari, ie, chrome and edge. It is working fine. I have written the following code and it is working fine for select and option elements. See the following example.

<!DOCTYPE html>
<html>
<head>
<style>
select, option{
background-color:lightblue;
padding:8px 16px;
font-size:22px;
font-weight:1000;
border:0px;
border-radius:4px;
}

</style>
</head>

<body>
<select>
<option >One</option>
<option >Two</option>
<option >Three</option>
</select>

</body>
</html>
5

Hi there zainwah24,

you probably did not notice that @PaulOB
posted this definitive statement…

“It will work in some browsers and not others
so there is no way to consistently apply styles
to a select element and its options.”

coothead

1 Like
6

You’ve styled all of them and not just one different from the others which seemed to be the question asked.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.