CODEWITHSUNDEEP
htmlcss
Raju Putchala
Raju Putchala

Reputation: 96

How to apply css styles for select control options in chrome

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

Upvotes: 2

Views: 5691

Answers (2)

Raju Putchala
Raju Putchala

Reputation: 96

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.

Upvotes: 0

Rounin
Rounin

Reputation: 29511

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>

Upvotes: -1

Related Questions