Αυτή η καθαρή μέθοδος CSS3 για την ομορφιά των κουμπιών επιλογής λειτουργεί καλά στις ακόλουθες περιπτώσεις:
1. Μπορεί να είναι συμβατό με IE9 και άνω, και αν χρειάζεται να είναι συμβατό με IE8, γράψτε το hack του IE για να αφαιρέσετε το στυλ
2. Υποστηρίζεται μόνο το ραδιόφωνο του κουμπιού επιλογής, επειδή ο κύκλος του στυλ επιλογής κουμπιού επιλογής μπορεί να γίνει με CSS, αλλά το πλαίσιο ελέγχου του πλαισίου ελέγχου του κουμπιού ελέγχου απαιτεί βιβλιοθήκη γραμματοσειρών εικόνων ή εικονιδίων
3. Δεν απαιτείται JS για την υποστήριξη εφέ μεταγωγής
Η παρακάτω εικόνα είναι η τελική απόδοση:
Κώδικας HTML:
Κώδικας CSS:
Το πιο σημαντικό πράγμα σε αυτήν τη μέθοδο είναι να επιλέξετε το όνομα κλάσης του εφέ: .radio input:checked + span.radio-on
+ είναι μια ψευδοκλάση του CSS2, που σημαίνει ότι το div+p επιλέγει <div> όλα τα στοιχεία αμέσως μετά το στοιχείο <p> .
Δηλαδή, βρείτε την επιλεγμένη είσοδο (:checked) και, στη συνέχεια, χρησιμοποιήστε το στοιχείο span που ονομάζεται radio-on για να κάνετε το επιλεγμένο εφέ κύκλου.
Υπάρχουν πολλές μέθοδοι καλλωπισμού στο Διαδίκτυο για να κάνετε την ετικέτα σε κύκλο, αλλά σε αυτήν την περίπτωση, το κείμενο μεμονωμένης επιλογής πρέπει να τοποθετηθεί έξω από την ετικέτα, γεγονός που οδηγεί στο γεγονός ότι όταν κάνετε κλικ στο κείμενο, το εφέ μεμονωμένης επιλογής δεν μπορεί να αλλάξει.
Έτσι, πρόσθεσα ένα άνοιγμα με το όνομα radio-bg στην ετικέτα για να φτιάξω τον μεγάλο κύκλο στο πίσω μέρος και στη συνέχεια χρησιμοποίησα ένα άνοιγμα με το όνομα radio-on για να φτιάξω τον μικρό κύκλο στο μπροστινό μέρος της επιλογής.
Με αυτόν τον τρόπο, το κείμενο στην ετικέτα διατηρείται και το αποτέλεσμα της μεμονωμένης επιλογής μπορεί επίσης να αλλάξει.
Επισυνάπτεται: Το jQuery λαμβάνει τη μέθοδο τιμής του επιλεγμένου ραδιοφώνου
var val=$('input:radio[name="sex"]:checked').val();
Επισυνάψτε και τις τρεις μεθόδους:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Δημοσιεύτηκε στις 16/5/2019 11:10:41 π.μ.
|
|
|
|
