CODEWITHSUNDEEP
cssdrop-down-menuhtml-select
Ijaz
Ijaz

Reputation: 461

Need to color star to the option of select

I need to have a select option with the red star at the end of all option. 

<div class="styleSelect">
<select class="units">
 <option value="Metres">Metres*</option>
<option value="Feet">Feet*</option>
<option value="Fathoms">Fathoms*</option>
</select>

Option has to be in black color and star need to be the red color.

I have analyzed it. People recommended to add an image but that will not work on the browser other than firefox. Please help me on this.

Upvotes: 1

Views: 1660

Answers (3)

Prajapati Ghanshyam
Prajapati Ghanshyam

Reputation: 142

also try this. i added class into option

<div class="styleSelect">
<select class="units">
    <option class="red" value="Metres">Metres*</option>
    <option value="Feet">Feet*</option>
    <option value="Fathoms">Fathoms*</option>
</select>
<style>
    select.units option{
    background-color: #fff;
    color: #000 ;
}
option.red {
    background-color: #000 !important;
    color: red !important;
}
</style>

Upvotes: 0

scarleter
scarleter

Reputation: 37

select.units option:after{
    content: '*';
    color: red;
}
<div class="styleSelect">
  <select multiple class="units" size="1">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

Upvotes: 4

Prajapati Ghanshyam
Prajapati Ghanshyam

Reputation: 142

Try this:

select.units option {
    background-color: #000;
    color: red !important;
}

Upvotes: 0

Related Questions