και θα προσθέσουμε μια επικεφαλίδα χρησιμοποιώντας την ετικέτα

. Για να προσθέσουμε ένα αναπτυσσόμενο μενού μέσα σε αυτό, θα χρησιμοποιήσουμε μια ετικέτα και θα προσθέσουμε ' Διάλεξε μία χώρα ” ως ετικέτα. Μετά από αυτό, θα χρησιμοποιήσουμε την ετικέτα <επιλογή> για να κάνουμε τις επιλογές απολαυστικές για τον χρήστη και να εκχωρήσουμε τις τιμές των επιλογών με το ' <επιλογή> ετικέτα '.

HTML

< div >
< h1 > Linux h1 >
< επιγραφή > Διάλεξε μία χώρα: επιγραφή >
< επιλέγω όνομα = 'επιλέγω' ταυτότητα = 'επιλέγω' >
< επιλογή κρυφή επιλεγμένη > --Επιλέξτε μία επιλογή-- επιλογή >
< επιλογή αξία = '1' > Γερμανία επιλογή >
< επιλογή αξία = 'δύο' > Ιράν επιλογή >
< επιλογή αξία = '3' > Τουρκία επιλογή >
< επιλογή αξία = '4' > Ινδία επιλογή >
< επιλογή αξία = '5' > Κίνα επιλογή >
επιλέγω >
div >

Σημείωση: Έχουμε χρησιμοποιήσει ' κρυφό επιλεγμένο ' να προσδιορίσω ' -Διάλεξε μια επιλογή- ” ως προεπιλεγμένη επιλογή. Όταν όμως ο χρήστης επιλέξει ένα από αυτά, θα είναι κρυφό.

Στο εξής, θα πάμε στο CSS και θα το διαμορφώσουμε.

Βήμα 2: Αναπτυσσόμενο μενού στυλ χρησιμοποιώντας CSS

Θα το χρησιμοποιησουμε ' div ' για να αποκτήσετε πρόσβαση στο κοντέινερ που δημιουργήθηκε και να ορίσετε το χρώμα φόντου του div ως ' rgb(191, 207, 235) '. Θα ορίσουμε επίσης το ύψος του div, το μέγεθος της γραμματοσειράς του κειμένου και το χρώμα του κειμένου ως ' 150 εικονοστοιχεία », « x-large ', και ' rgb(2, 0, 0) », αντίστοιχα. Στη συνέχεια, θα ορίσουμε το περίγραμμα του div ως ' 5 εικονοστοιχεία », « κορυφογραμμή ', και ' rgb(108, 75, 209) '.

CSS

div {
χρώμα φόντου: rgb ( 191 , 207 , 235 ) ;
ύψος: 150 px;
μέγεθος γραμματοσειράς: x-large;
χρώμα: rgb ( δύο , 0 , 0 ) ;
περίγραμμα: 5px κορυφογραμμή rgb ( 108 , 75 , 209 ) ;
}

Τώρα, θα διαμορφώσουμε το αναπτυσσόμενο μενού και θα ορίσουμε το χρώμα φόντου του μενού ως ' rgb(194, 222, 209) ' και το περίγραμμα του μενού ως ' 3 εικονοστοιχεία », « στερεός ', και ' rgb(84, 73, 116) '. Μετά από αυτό, θα ορίσουμε το πλάτος, το ύψος και το μέγεθος γραμματοσειράς του μενού ως ' 300 εικονοστοιχεία », « 30 εικονοστοιχεία ' και ' μεγάλο », αντίστοιχα:

επιλέγω {
φόντο: rgb ( 194 , 222 , 209 ) ;
περίγραμμα: 3px συμπαγές rgb ( 84 , 73 , 116 ) ;
πλάτος: 300 px;
ύψος: 30 px;
μέγεθος γραμματοσειράς: μεγάλο;
}

Όπως μπορείτε να δείτε από την έξοδο, το αναπτυσσόμενο μενού δημιουργείται και διαμορφώνεται με επιτυχία χρησιμοποιώντας HTML και CSS:

Στην παραπάνω παρεχόμενη έξοδο, φαίνεται ότι δημιουργείται το αναπτυσσόμενο μενού και σας επιτρέπει να επιλέξετε οποιαδήποτε επιλογή σύμφωνα με τις προτιμήσεις σας. Μεταβαίνουμε στην επόμενη ενότητα, όπου θα αλλάξουμε το χρώμα της επιλεγμένης επιλογής χρησιμοποιώντας το CSS.

Πώς να αλλάξετε το χρώμα της επιλεγμένης επιλογής χρησιμοποιώντας CSS;

Για να αλλάξετε το επιλεγμένο χρώμα επιλογής του μενού, το ' :τετραγωνισμένος Χρησιμοποιείται ο επιλογέας CSS. Το :checked είναι ένα στοιχείο ψευδο-κλάσης που μπορεί να συνδεθεί μόνο με στοιχεία τύπου εισόδου, όπως ' επιλογή », « πλαίσιο ελέγχου ', και ' ραδιόφωνο κουμπιά '. Χρησιμοποιείται κυρίως για την αλλαγή της συμπεριφοράς της επιλεγμένης τιμής αυτών των στοιχείων.

Σύνταξη

Η σύνταξη του :checked είναι:

στοιχείο_όνομα:ελεγμένο {
Δηλώσεις CSS.
}

Στις δηλώσεις CSS μπορείτε να γράψετε τον κωδικό για την επιλεγμένη τιμή της επιλογής, του πλαισίου ελέγχου και του ραδιοφώνου.

Τώρα, μεταβείτε στο μενού και αλλάξτε το χρώμα της επιλεγμένης επιλογής χρησιμοποιώντας τον επιλογέα :checked. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε ' επιλογή ' για πρόσβαση στις επιλογές που δημιουργήθηκαν στο μενού και ' :τετραγωνισμένος ” ψευδο-κλάση στην επιλεγμένη επιλογή μενού. Επιτρέπει την αλλαγή της συμπεριφοράς της επιλεγμένης επιλογής. Στη συνέχεια, θα ορίσουμε το χρώμα της επιλεγμένης επιλογής ως ' rgb(246, 250, 0) ' και το φόντο της επιλεγμένης επιλογής ως ' rgb(5, 26, 1) ”:

επιλογή: επιλεγμένο {
χρώμα: rgb ( 246 , 250 , 0 ) ;
χρώμα φόντου: rgb ( 5 , 26 , 1 ) ;
}

Όπως μπορείτε να δείτε στην ακόλουθη έξοδο, το φόντο και το χρώμα της επιλεγμένης επιλογής αλλάζουν:

Έχουμε εξηγήσει τη μέθοδο αλλαγής του επιλεγμένου χρώματος επιλογής χρησιμοποιώντας το CSS.

συμπέρασμα

Ο ' :τετραγωνισμένος Ο επιλογέας της ψευδο-κλάσης χρησιμοποιείται για την αλλαγή του επιλεγμένου χρώματος της επιλογής. Το :checked χρησιμοποιείται μαζί με το ' επιλογή ” του αναπτυσσόμενου μενού και μετά από αυτό, μπορείτε να ορίσετε το χρώμα της επιλεγμένης επιλογής. Αυτό το εγχειρίδιο εξηγούσε τη μέθοδο δημιουργίας και διαμόρφωσης του αναπτυσσόμενου μενού και στη συνέχεια παρουσίασε τη διαδικασία αλλαγής του επιλεγμένου χρώματος επιλογής χρησιμοποιώντας CSS.