HTML/CSS select option hover (React)

Question

I'm trying to set the hover background color of the options inside select tag. It seems that it has been difficult to do this, but is there any up to date way to do this?

I'm using mobx+react in my application

HTML:

    return(
        <select 
          className="selectDecoration" 
          name={ name } 
          value={ value } 
          onChange={ e => onChange( name, e.target.value) }
        >
        <option  disabled hidden value={ name } >
          <a>{ name }</a>
        </option>
        { options.map( item => 
             <option value={ item }>
              <a>{ item }</a>
             </option> ) 
         }
        </select>
    );

score 0 · Accepted Answer · answered Oct 21 '18 at 14:55

It is impossible to inject CSS to option tag, because it is rendered by the Operating System and its Web browser, the select tag is so useful, especially in mobile design, but it is so hard to dealing with it.

For more information I proffer this link. you can use custom react library to implement a select like design. I used relect.

HTML/CSS select option hover (React)

1 Answers1