I have an issue to customize the select option menu in the CSS file in my React example. I used styles to reach each CSS code snippet though import styles from './Header.module.css';

I have an issue to option hover, select arrow up or down, style the arrow inside the select element.

How can I write all processes? Only I need this kind of code like header nav .languageMenu:active, .languageMenu:hover.

Here is my select option code snippet shown below.

<li>
   <select className={styles.languageMenu}
     id="Language"
     value={lang}
     onChange={(e) => setLang(e.target.value)}
     onBlur={(e) => setLang(e.target.value)}
   >
      {languages.map((language) => {
        return (
           <option value={language.lang} key={language.lang}>
                {language.displayName}
           </option>
        );
      })}
   </select>
</li>

Here is my Header.module.css

header nav .languageMenu {
    width: 100%;
    min-width: 15ch;
    max-width: 30ch;
    border: 1px solid #ff4655;
    border-color: #ff4655;
    border-radius: 0.25em;
    padding: 0.25em 0.5em;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
}

header nav .languageMenu:active, .languageMenu:hover {  // not working
    outline: none
}