Stylizowanie opcji w selecie

Question

Mam kilka pytań:

1. Jak zmienić wygląd scrollbar-tracka w selecie? Próbowałem w ten sposób, ale nie działa: 

select::-webkit-scrollbar-track
{
	background-color: #2F3336;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}

2. Mam selecta, którego opcjami są kolory. Jak zmienić kolor tylko konkretnego elementu między znacznikami option?

<select>
							
<option>&#xf111; Biały</option>
<option>&#xf111; Szary</option>
<option>&#xf111; Czarny</option>			
<option>&#xf111; Czerwony</option>
<option>&#xf111; Żółty</option>
<option>&#xf111; Zielony</option>
<option>&#xf111; Niebieski</option>
<option>&#xf111; Fioletowy</option>
<option>&#xf111; Pomarańczowy</option>
<option>&#xf111; Brązowy</option>
<option>&#xf111; Różowy</option>
							
</select>

chciałbym zmienić kolor tylko  czyli ikonki koła z font awesome. Próbowałem zamykać ten napis w spana, a następnie nadawać atrybut color, ale w ten sposób nic się nie zmienia.

3. Po dodaniu np. style="color:red;" do znacznika option, zmienia się kolor całego napisu, ale zauważyłem, że po wyborze danej opcji ponownie przyjmuje ona kolor czarny w oknie selecta. Czy da się jakoś temu zaradzić, tak żeby po wyborze opcji z listy, tekst miał nadal nadane kolory?

Answer 1

Niedawno spotkałem się z tym samym problemem.
Z tego co pamiętam to (chyba) tylko Chrome obsługiwał stylowanie opcji selecta.
Łatwiej będzie stworzyć własną kontrolkę. Tu masz przykład https://www.w3schools.com/howto/howto_custom_select.asp

Answer 2

Stylizowanie elementów wewnątrz <select> jest skomplikowane i trudne do opanowania. Jeśli chcesz uzyskać pełną kontrolę, powinieneś rozważyć użycie biblioteki do stylizowania, lub spróbuj zrobić własne menu rozwijane przy użyciu elementów nie-semantycznych, użyj JavaScript i WAI-ARIA, aby zapewnić semantykę .

select