::placeholder { color: rgb(161, 209, 234); }
โดยการแสดงของคำสั่งเปลี่ยนสีข้อความ placeholder นั้นจะแตกต่างกันไปในแต่ละเบราว์เซอร์
คำสั่งการเปลี่ยนสีข้อความ placeholder ใน Mozilla หรือ Firefox
::-moz-placeholder { color: rgb(161, 209, 234); opacity: 1; }
คำสั่งการเปลี่ยนสีข้อความ placeholder ใน Microsoft Edge
::-ms-input-placeholder { color: rgb(161, 209, 234); }
คำสั่งการเปลี่ยนสีข้อความ placeholder ที่มักใช้และเว็บเบราว์เซอร์ทั่วไปรองรับ
::placeholder { color: rgb(161, 209, 234); }
< div class="dropdown" > < button class="dropbtn" > ... < /button > < div class="dropdown-content" > < a href=""> < a href=""> < a href=""> < /div > < /div >
ใน div dropdown จะประกอบด้วย 2 ส่วนคือส่วนของ button และส่วนของ div (dropdown-content class) ที่คลุม tag a เอาไว้เริ่มต้นส่วนของ dropdown-content class จะถูกตั้งค่า hidden ไว้ด้วยคำสั่ง CSS
.dropdown-content { display:none; }
จากนั้นเมื่อต้องการให้ส่วน dropdown-content แสดง ให้ตั้งค่า hover ของ button ใน css
.dropdown:hover .dropdown-content { display: block; }โดยการแสดงของ dropdown-content นั้นค่าเริ่มต้นจะแสดงเลเยอร์เดียวกับเนื้อหาอื่น ๆ ทำให้เกิดการดันเนื้อหาอื่น ๆ ดังนั้นจึงต้องตั้งค่า z-index เพื่อให้ dropdown-content ลอยจากส่วนอื่น ๆ นอกจากนั้นยังต้องมีการกำหนด position เพื่อทำให้ dropdown-content แสดงในตำแหน่งที่ต้องการ
.dropdown-content { position: absolute; z-index: 1; right:.5em; }