0

I want to change this blue to transparent and the text color to red on hover

I want to change this blue to transparent and the text color to red on hover

YaraR
  • 111
  • 1
  • 11
  • 3
    [Duplicate](https://www.google.com/search?q=site%3Astackoverflow.com+css+style+select+options) of [How to style the option of an html "select" element?](https://stackoverflow.com/q/7208786/4642212). – Sebastian Simon Oct 30 '20 at 16:00

2 Answers2

4

Here is a working example. - A single select option cannot be styled.

What we are doing here is changing the select to multiple selects using size which is triggered onclick. Once converted to a multiple select you can then style the option hover.

.blue:hover {background: blue;}

.green:hover {background: green;}

.red:hover {background: red;}
<select onfocus='this.size=3;' onblur='this.size=0;' 
            onchange='this.size=1; this.blur();'>
<option class="blue" >blue background</option>
<option class="green" >green background</option>
<option class="red" >red background</option>
</select>
Aib Syed
  • 3,118
  • 2
  • 19
  • 30
  • 1
    really love the use of ```onfocus='this.size=3;' onblur='this.size=0;' onchange='this.size=1; this.blur();'``` , tossed in some :focus absolutes and hovers and it made really seamless select inside td :D – BringerOfTheDawn Jun 14 '21 at 06:06
  • @Dr. Tenma thanks! It is posible change background if option is pressed? – Quang Tuyen Nguyen Jan 21 '22 at 05:04
-1

You can use try this css code.

rgba color the fourth value about opacity .

<style>
.yourOptionName :hover {background:rgba(0, 0, 0, .4) ; color:red}
</style>
Shawn -
  • 109
  • 9