Προχωρημένη μορφοποίηση <select> menu (μορφοποίηση πρώτου option)

[philos]

Γεια σας παιδιά!

 

Έχω πάρει σαν βάση αυτό το παράδειγμα για να φτιάξω ένα μορφοποιημένο drop-down menu σε HTML/CSS. Ήταν πολύ βασικό για μένα που μπορώ να βάλω δύο χρώματα μέσα στα <options>.

 

Χρειάζομαι βοήθεια στο εξής: θέλω, όπως φαίνονται μορφοποιημένα τα κείμενα μέσα στα options όταν κάνεις click (στο παράδειγμα: κόκκινο και πράσινο), να φαίνεται μορφοποιημένα και κατά το πρώτο φόρτωμα της σελίδας + μετά την επιλογή κάποιου option, έτσι ώστε το selected option να έχει κι αυτό κόκκινο και πράσινο χρώμα.

Στο παραπάνω, το κορυφαίο επιλεγμένο στοιχείο, είναι πάντα σε μαύρο χρώμα - αυτό θέλω να αλλάξω.

 

Καμιά ιδέα;

[defacer]

Κάνεις δεξί κλικ και inspect σ' αυτό που έχεις ως υπόδειγμα, βλέπεις πώς γίνεται το κόκκινο/πράσινο (σούπερ απλό) και κάνεις το ίδιο και στο div που είναι η "κλειστή" έκδοση.

 

By the way, αυτό που φαίνεται δεν είναι ούτε μορφοποιημένο select ούτε έχουν μπει δύο χρώματα μέσα στο option (τίποτα από τα δύο δεν γίνεται). Απλά κρύβει το select και ζωγραφίζει ο,τι του αρέσει με ο,τι στοιχεία θέλει. Αλλά αν είναι να μπεις σε τέτοια διαδικασία, καλύτερα παράτα τις καστομιές και βάλε select2.