วิธีการ - เปลี่ยนสีตัวยึดตำแหน่ง
เรียนรู้วิธีเปลี่ยนสีของแอตทริบิวต์ตัวยึดตำแหน่งด้วย CSS
ตัวยึดสี
ขั้นตอนที่ 1) เพิ่ม HTML:
ใช้องค์ประกอบอินพุตและเพิ่มแอตทริบิวต์ตัวยึดตำแหน่ง:
ตัวอย่าง
<input type="text" placeholder="A red placeholder text..">
ขั้นตอนที่ 2) เพิ่ม CSS:
ในเบราว์เซอร์ส่วนใหญ่ ข้อความที่พักจะเป็นสีเทา เมื่อต้องการเปลี่ยนสิ่งนี้ ให้จัดรูปแบบที่พักด้วยตัว::placeholder
เลือก ที่ไม่ได้มาตรฐาน โปรดทราบว่า Firefox เพิ่มความทึบที่ต่ำกว่าให้กับตัวยึดตำแหน่ง ดังนั้นเราจึงใช้opacity:
1 เพื่อแก้ไขปัญหานี้
ตัวอย่าง
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet
Explorer 10-11 */
color: red;
}
::-ms-input-placeholder
{ /* Microsoft Edge */
color: red;
}
เคล็ดลับ:อ่านเพิ่มเติมเกี่ยวกับ ::placeholder selector ในการอ้างอิง CSS ของเรา: CSS ::placeholder Property