CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brarord
Brarord

Reputation: 651

How to change the color of options inside <select> menu?

the problem is real! No idea how to do it... Is this even possible? I want have white letters in this menu:

enter image description here

My code:

<select id="addRow-fieldType" style="margin-top: 10px; width: 180px; ">
    <option value="null">NUMBER</option>
    <option value="2">CHAR(32)</option>
    <option value="3">DATE</option>
    <option value="4">VARCHAR</option>
    <option value="5">BLOB</option>
</select>

Upvotes: 0

Views: 162

Answers (1)

Shahryar Mohajer
Shahryar Mohajer

Reputation: 589

try this:

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}
<select id="addRow-fieldType" style="margin-top: 10px; width: 180px; ">
    <option value="null">NUMBER</option>
    <option value="2">CHAR(32)</option>
    <option value="3">DATE</option>
    <option value="4">VARCHAR</option>
    <option value="5">BLOB</option>
</select>

Upvotes: 3

Related Questions