Tengo un problema para personalizar el menú de opciones de selección en el archivo CSS en mi ejemplo de React. Utilicé estilos para llegar a cada fragmento de código CSS aunque import styles from './Header.module.css';

Tengo un problema con la opción de pasar el mouse, seleccionar la flecha hacia arriba o hacia abajo, diseñar la flecha dentro del elemento de selección.

¿Cómo puedo escribir todos los procesos? Solo necesito este tipo de código como header nav .languageMenu:active, .languageMenu:hover .

Aquí está mi fragmento de código de opción de selección que se muestra a continuación.

 <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>

Aquí está mi 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 }