Υπάρχει ένας τρόπος μόνο με CSS για να διαμορφώσετε ένα πτυσσόμενο μενού <select>
;
Πρέπει να διαμορφώσω μια φόρμα <select>
όσο το δυνατόν περισσότερο, χωρίς JavaScript. Ποιες είναι οι ιδιότητες που μπορώ να χρησιμοποιήσω για να το κάνω αυτό σε CSS;
Αυτός ο κώδικας πρέπει να είναι συμβατός με όλα τα μεγάλα προγράμματα περιήγησης:
Ξέρω ότι μπορώ να το κάνω με JavaScript: Παράδειγμα.
Και δεν μιλάω για απλό styling. Θέλω να ξέρω, τι καλύτερο μπορούμε να κάνουμε μόνο με CSS.
Βρήκα παρόμοιες ερωτήσεις στο Stack Overflow.
Και αυτή εδώ στο Doctype.com.
Το στοιχείο select και η πτυσσόμενη λειτουργία του είναι δύσκολο να διαμορφωθούν.
style attributes for select element από τον Chris Heilmann επιβεβαιώνει αυτό που είπε ο Ryan Dohery σε ένα σχόλιο στην πρώτη απάντηση:
"Το στοιχείο select είναι μέρος του λειτουργικού συστήματος, όχι του χρώματος του προγράμματος περιήγησης. Ως εκ τούτου, είναι πολύ αναξιόπιστο ως προς το στυλ, και δεν έχει απαραίτητα νόημα να προσπαθήσετε να ούτως ή άλλως.",
Οι ετικέτες <select>
μπορούν να διαμορφωθούν μέσω CSS όπως ακριβώς και κάθε άλλο στοιχείο HTML σε μια σελίδα HTML που αναπαράγεται σε ένα πρόγραμμα περιήγησης. Παρακάτω είναι ένα (υπερβολικά απλό) παράδειγμα που θα τοποθετήσει ένα στοιχείο select στη σελίδα και θα αποδώσει το κείμενο των επιλογών με μπλε χρώμα.
Παράδειγμα αρχείου HTML (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Παράδειγμα αρχείου CSS (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
Ναι. Μπορείτε να μορφοποιήσετε οποιοδήποτε στοιχείο HTML με το όνομα της ετικέτας του, ως εξής:
select {
font-weight: bold;
}
Φυσικά, μπορείτε επίσης να χρησιμοποιήσετε μια κλάση CSS για να το στυλιζάρετε, όπως κάθε άλλο στοιχείο:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>