ในการจัดรูปแบบข้อความตัวแทนขององค์ประกอบอินพุต HTML ด้วย CSS คุณต้องกำหนดเป้าหมาย องค์ประกอบหลอก คุณลักษณะ. คุณทำอย่างนั้นด้วยตัวเลือกหลอก CSS :: .
องค์ประกอบอินพุตปกติที่มีข้อความตัวยึดตำแหน่ง
<input type="text" placeholder="Hello there!">ลักษณะข้อความตัวแทนมีลักษณะอย่างไรกับสไตล์เบราว์เซอร์เริ่มต้น:
CSS
ตอนนี้ มาใช้ CSS ::placeholder . กัน ตัวเลือกเพื่อทำให้ข้อความตัวแทนขององค์ประกอบอินพุตเป็นสีแดง:
input::placeholder {
color: red;
}ผลลัพธ์:
คลาสข้อความตัวยึดตำแหน่งที่ใช้ซ้ำได้
หากคุณไม่ต้องการจัดรูปแบบ <input> . ทั้งหมดของคุณ ข้อความตัวยึดตำแหน่งองค์ประกอบในลักษณะเดียวกับโค้ดด้านบน (โดยการกำหนดเป้าหมายองค์ประกอบอินพุตโดยตรง) คุณสามารถใช้คลาส:
.custom-input-placeholder::placeholder {
color: red;
}และเพิ่มองค์ประกอบอินพุตที่คุณต้องการ:
<input class="custom-input-placeholder" type="text" placeholder="Hello there!">นานาน่ารู้
อย่าสับสนองค์ประกอบหลอก ด้วย คลาสหลอก
- องค์ประกอบหลอกเป็นตัวแทนของ DOM
- pseudo-classes เป็นตัวแทนของ state ขององค์ประกอบตามการโต้ตอบของผู้ใช้กับมัน ตัวอย่างเช่น
:focus, หรือ:active.
ความแตกต่างทางไวยากรณ์:
- องค์ประกอบหลอกถูกกำหนดด้วยเครื่องหมายทวิภาคคู่:
:: - คลาสหลอกถูกกำหนดด้วยโคลอนเดี่ยว
:
