Is it possible to have different colours for different items in the dropdown list?
For example:
Option 1 = green
Option 2 = blue
etc
Is it possible to have different colours for different items in the dropdown list?
For example:
Option 1 = green
Option 2 = blue
etc
here is what you want Styling Dropdown Lists
<style type="text/css">
option.red {background-color: #cc0000; font-weight: bold; font-size: 12px;}
option.pink {background-color: #ffcccc;}
</style>
<select name=colors>
<option class="red" value= "../getting_started/">Getting Started </option>
<option class="pink" value= "../getting_started/html_intro1.htm">- Intro to HTML
</option>
</select>
<Style tyle=
but got no hits. I just tested this and the color works as desired even if you remove tyle
leaving the first line to read <style =text/css>
Feb 26, 2015 at 0:18
CSS and HTML
#option-1 {
color: red;
}
#option-2 {
color: green;
}
#option-3 {
color: yellow;
}
#option-4 {
color: blue;
}
<select>
<option id="option-1">Option 1</option>
<option id="option-2">Option 2</option>
<option id="option-3">Option 3</option>
<option id="option-4">Option 4</option>
</select>
I guess you mean a select
? This should work:
option:nth-child(1) { background: green; }
option:nth-child(2) { background: blue; }
etc
:nth-child
doesn't work in IE (and there are problems with it in some other browsers).
<div class="col-lg-3">
<label>Job Status:</label>
<select type="text" name="fname" class="form-control" placeholder="Job Status" >
<option value="">Select Status</option>
<option class="btn btn-success" value="Working">Working</option>
<option class="btn btn-warning" value="In Proccess">In Proccess</option>
<option class="btn btn-danger" value="Closed">Closed</option>
</select>
</div>