Εδώ είναι η HTML μου:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Θέλω να κάνω το όνομα του προϊόντος (δηλ. 'Προϊόν1', 'Προϊόν2' , κλπ) έντονο και τις κατηγορίες του (δηλ. Ηλεκτρονικά, Αθλητικά, κλπ) πλάγια, χρησιμοποιώντας μόνο CSS. Βρήκα μια παλιά ερώτηση που ανέφερε ότι αυτό δεν είναι δυνατό με τη χρήση HTML και CSS, αλλά ελπίζω ότι υπάρχει λύση τώρα.
Υπάρχουν μόνο λίγα χαρακτηριστικά στυλ που μπορούν να εφαρμοστούν σε ένα στοιχείο <option>
.
Αυτό συμβαίνει επειδή αυτός ο τύπος στοιχείου αποτελεί παράδειγμα ενός "αντικατασταθέντος στοιχείου". Εξαρτώνται από το λειτουργικό σύστημα και δεν αποτελούν μέρος της HTML/του προγράμματος περιήγησης. Δεν μπορεί να διαμορφωθεί μέσω CSS
.
Υπάρχουν πρόσθετα αντικατάστασης/βιβλιοθήκες που μοιάζουν με ένα <select>
αλλά στην πραγματικότητα αποτελούνται από κανονικά στοιχεία HTML
που μπορούν να διαμορφωθούν.
Όχι, αυτό δεν είναι δυνατό, καθώς η διαμόρφωση αυτών των στοιχείων γίνεται από το λειτουργικό σύστημα του χρήστη. Το MSDN θα απαντήσει στην ερώτησή σας εδώ:
Εκτός από τα
background-color
καιcolor
, οι ρυθμίσεις στυλ που εφαρμόζονται μέσω του αντικειμένου στυλ για το στοιχείο option αγνοούνται.
Όπως αναφέρθηκε παραπάνω, δεν είναι πραγματικά εφικτό- ωστόσο, αν θέλετε απλά να διαμορφώσετε την αρχική κατάσταση για κάτι σαν την επιλογή 'Select Product...' πριν ο χρήστης αλληλεπιδράσει με το πεδίο, θα μπορούσατε να κάνετε κάτι σαν το παρακάτω --
Το παρακάτω παράδειγμα διαμορφώνει (τεχνικά όλη) την πρώτη επιλογή σε κόκκινο χρώμα και μόλις ο χρήστης αλληλεπιδράσει θα αφαιρέσει αυτή την επιλογή (η οποία έχει την τιμή value="defaultValue" που έχει οριστεί) και θα αφαιρέσει την κλάση που εφαρμόζεται στην επιλογή select. Μπορείτε να εφαρμόσετε και άλλες επιλογές εκτός από το χρώμα, αλλά θα επηρεάσουν μόνο το πεδίο μόλις αλλάξει, όχι την προβολή λίστας.
CSS
.default-value{
color: red;
}
jQuery
$("select").addClass('default-value');
$("select").bind("focus", function () {
$(this).children('option[value="defaultValue"]').remove();
$(this).removeClass('default-value');
});