How to apply css styles for select control options in chrome

Question

I've a select box with some options, I need to apply styles specific to select control option.

Styles I want apply are :

color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;

I've given class .taskpanel-select-control to my select control, and added css

.taskpanel-select-control option{
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}

Css for my select control is: border-radius: 3px;border: 1px solid #757575;-webkit-appearance:none; -moz-appearance:none; appearance: none; background: url(images/caret_down.svg) no-repeat;background-repeat: no-repeat;background-size:1em;background-position: 96%;min-width: 5em;height: 1.75em;padding-left: 0.5em;padding-right: 2em;

But these are not respected in the select options, is there any way to make this happen.

Image of Select Box

Can only be done with jquery. Look on google for jquery select option styling plugins. — Chris G, Jan 09 '16 at 14:31
I've used -webkit-appearance:none; -moz-appearance:none; appearance: none; styles for my select control, even I'm facing this problem — Raju Putchala, Jan 09 '16 at 15:01
@SergeyDenisov, this problem I'm facing only in chrome, it is working in firefox. — Raju Putchala, Jan 09 '16 at 17:22
I've used bootstrap dropdown to solve this issue, I'm almost out of my issue, thanks for your help. — Raju Putchala, Jan 25 '16 at 14:55

score 0 · Answer 1 · answered Oct 20 '16 at 10:18

I figured out solution for this issue. Applying css styles for select options is not possible in chrome, where as it is possible in firefox.

To make it work in both firefox and chrome I constructed select or drop down using ul and li.

Through which I could able to apply whatever styles I wanted to my select options which are nothing but list items (li).

Found one issue with this approach, auto suggestion are not coming in my constructed drop down where as it is by default behavior of normal html select box.

score -1 · Answer 2 · answered Jan 09 '16 at 14:57

-1

It should be as straightforward to apply styles to your <options> as to any other element:

.taskpanel-select-control option {
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}

p {
font-weight: bold;
}

<p>&lt;select&gt; containing unstyled &lt;option&gt; elements:</p>

<select>
<option>Registration</option> 
<option>Completion</option> 
<option>State</option> 
<option>Archive</option>
</select>

<p>&lt;select&gt; containing styled &lt;option&gt; elements:</p>

<select class="taskpanel-select-control">
<option>Registration</option> 
<option>Completion</option> 
<option>State</option> 
<option>Archive</option>
</select>

answered Jan 09 '16 at 14:57

Rounin

27,134
9
83
108

I couldn't find any difference for the unstyled select box and styled select with this approach. – Raju Putchala Jan 09 '16 at 15:03
I'm using Firefox 43.0.4 and all the styles are displaying properly. What browser are you using? – Rounin Jan 09 '16 at 15:14
I've verified in firefox, my styes are working fine, getting issue in chrome browser .I'm using chrome 46 – Raju Putchala Jan 09 '16 at 15:40
Yep. I just tested it in chrome 47 - you're right, the chrome browser is not picking up the style declarations. – Rounin Jan 09 '16 at 16:10
can I have any other alternative to make this happen – Raju Putchala Jan 10 '16 at 04:40
1

I've used bootstrap dropdown to solve this issue, I'm almost out of my issue, thanks for your help. – Raju Putchala Jan 25 '16 at 14:55
your suggested approach doesn't work in chrome that is what my issue, thanks for your suggestion. – Raju Putchala Oct 20 '16 at 10:19
issue is in the chrome as the title says "How to apply css styles for select control options in chrome" – mahen3d Apr 16 '19 at 01:57

How to apply css styles for select control options in chrome

2 Answers2