div >
บันทึก: เราใช้ “ ซ่อนไว้ เลือกแล้ว ” เพื่อระบุ “ – เลือกตัวเลือก – ” เป็นตัวเลือกเริ่มต้น แต่เมื่อผู้ใช้เลือกหนึ่งในนั้น จะถูกซ่อนไว้
ต่อไปเราจะไปที่ CSS และจัดรูปแบบ
ขั้นตอนที่ 2: สไตล์เมนูแบบเลื่อนลงโดยใช้ CSS
เราจะใช้ “ div ” เพื่อเข้าถึงคอนเทนเนอร์ที่สร้างขึ้นและตั้งค่าสีพื้นหลังของ div เป็น “ rgb(191, 207, 235) ” เราจะกำหนดความสูงของ div ขนาดตัวอักษรของข้อความ และสีของข้อความเป็น ' 150px ”, “ x-ขนาดใหญ่ ', และ ' rgb(2, 0, 0) ” ตามลำดับ ต่อไปเราจะกำหนดเส้นขอบของ div เป็น “ 5px ”, “ สันเขา ', และ ' rgb(108, 75, 209) ”
CSS
div {
พื้นหลัง-สี: rgb ( 191 , 207 , 235 ) ;
ความสูง: 150px;
ขนาดตัวอักษร: x ขนาดใหญ่;
สี: rgb ( สอง , 0 , 0 ) ;
เส้นขอบ: 5px ริดจ์ rgb ( 108 , 75 , 209 ) ;
}
ตอนนี้เราจะจัดสไตล์เมนูแบบเลื่อนลงและตั้งค่าสีพื้นหลังของเมนูเป็น “ rgb(194, 222, 209) ” และขอบของเมนูเป็น “ 3px ”, “ แข็ง ', และ ' rgb(84, 73, 116) ” หลังจากนั้นเราจะกำหนดความกว้าง ความสูง และขนาดตัวอักษรของเมนูเป็น “ 300px ”, “ 30px ' และ ' ใหญ่ ” ตามลำดับ:
เลือก {
พื้นหลัง: rgb ( 194 , 222 , 209 ) ;
เส้นขอบ: 3px ของแข็ง rgb ( 84 , 73 , 116 ) ;
ความกว้าง: 300px;
ความสูง: 30px;
ขนาดตัวอักษร: ใหญ่;
}
ดังที่คุณเห็นจากผลลัพธ์ เมนูแบบเลื่อนลงจะถูกสร้างขึ้นและจัดรูปแบบได้สำเร็จโดยใช้ HTML และ CSS:
ในผลลัพธ์ที่ให้ไว้ด้านบน คุณจะเห็นได้ว่าเมนูแบบเลื่อนลงถูกสร้างขึ้น และช่วยให้คุณสามารถเลือกตัวเลือกใดก็ได้ตามความต้องการของคุณ เราย้ายไปยังส่วนถัดไปที่เราจะเปลี่ยนสีตัวเลือกที่เลือกโดยใช้ CSS
จะเปลี่ยนสีของตัวเลือกที่เลือกโดยใช้ CSS ได้อย่างไร
ในการเปลี่ยนสีตัวเลือกที่เลือกของเมนู “ :checked ” ใช้ตัวเลือกของ CSS :checked เป็นองค์ประกอบคลาสหลอกที่สามารถเชื่อมโยงกับองค์ประกอบประเภทอินพุตเท่านั้น เช่น “ ตัวเลือก ”, “ ช่องทำเครื่องหมาย ', และ ' วิทยุ ปุ่ม ” ส่วนใหญ่จะใช้เพื่อเปลี่ยนพฤติกรรมของค่าที่เลือกขององค์ประกอบเหล่านี้
ไวยากรณ์
ไวยากรณ์ของ :checked คือ:
element_name:checked {
ประกาศ CSS;
}
ในการประกาศ CSS คุณสามารถเขียนโค้ดสำหรับค่าที่เลือกของตัวเลือก ช่องทำเครื่องหมาย และตัวเลือก
ตอนนี้ ย้ายไปที่เมนูและเปลี่ยนสีของตัวเลือกที่เลือกโดยใช้ :checked selector ในการทำเช่นนั้น เราจะใช้ “ ตัวเลือก ” เพื่อเข้าถึงตัวเลือกที่สร้างในเมนูและ “ :checked ” หลอกคลาสไปยังตัวเลือกเมนูที่เลือก อนุญาตให้เปลี่ยนพฤติกรรมของตัวเลือกที่เลือก ต่อไปเราจะกำหนดสีของตัวเลือกที่เลือกเป็น “ rgb(246, 250, 0) ” และพื้นหลังของตัวเลือกที่เลือกเป็น “ rgb(5, 26, 1) ”:
ตัวเลือก:checked {
สี: rgb ( 246 , 250 , 0 ) ;
พื้นหลัง-สี: rgb ( 5 , 26 , 1 ) ;
}
ดังที่คุณเห็นในผลลัพธ์ต่อไปนี้ พื้นหลังและสีของตัวเลือกที่เลือกจะเปลี่ยนไป:
เราได้อธิบายวิธีการเปลี่ยนสีของตัวเลือกที่เลือกโดยใช้ CSS
บทสรุป
“ :checked ” selector ของ pseudo-class ใช้ในการเปลี่ยนสีของ option ที่เลือก :checked ถูกใช้พร้อมกับ “ ตัวเลือก ” ของเมนูแบบเลื่อนลง และหลังจากนั้น คุณสามารถกำหนดสีของตัวเลือกที่เลือกได้ คู่มือนี้อธิบายวิธีการสร้างและกำหนดสไตล์เมนูแบบเลื่อนลง จากนั้นสาธิตขั้นตอนการเปลี่ยนสีตัวเลือกที่เลือกโดยใช้ CSS