ในคู่มือนี้ เราจะอธิบายวิธีการเปลี่ยนสีของตัวยึดตำแหน่งอินพุตโดยใช้ CSS
วิธีที่ 1: เปลี่ยนสีตัวยึดตำแหน่งอินพุตโดยใช้ '::placeholder' Selector
ซีเอสเอส “ ::ตัวยึดตำแหน่ง ตัวเลือก ” ใช้เพื่อเลือกองค์ประกอบของแบบฟอร์มที่มีข้อความตัวแทน สามารถใช้เพื่อเปลี่ยนข้อความตัวแทนได้ นอกจากนี้ คุณสามารถใช้ตัวเลือกนี้เพื่อปรับเปลี่ยนสีของที่พักสำหรับการป้อนข้อมูล
ไวยากรณ์
ไวยากรณ์ของ ::placeholder มีดังนี้:
:: ตัวยึดตำแหน่ง {
สี : ค่า
}
ในสถานที่ของ “ ค่า ” คุณสามารถตั้งค่าสีของตัวยึดตำแหน่งอินพุตตามที่เราเลือกได้
มาดูตัวอย่างการใช้งานจริงกัน โดยเราจะเปลี่ยนสีของตัวยึดตำแหน่งอินพุต
ตัวอย่าง
ในการเปลี่ยนสีตัวยึดตำแหน่งอินพุต ขั้นแรก เราจะสร้างองค์ประกอบอินพุตโดยใช้แท็ก และตั้งค่าประเภทของอินพุตเป็น “ ข้อความ ” ถัดไป ตั้งค่าข้อความของตัวยึดตำแหน่งอินพุตเป็น “ เข้า ชื่อของคุณ ”
HTML
< ร่างกาย >< ป้อนข้อมูล พิมพ์ = 'ข้อความ' ตัวยึดตำแหน่ง = 'ใส่ชื่อของคุณ' >
< / ร่างกาย >
ผลลัพธ์ของรหัสที่กำหนดคือ:
สีเริ่มต้นของตัวยึดตำแหน่งอินพุตจะแสดงในภาพด้านบน
ตอนนี้เราย้ายไปที่ CSS และใช้ “ ::ตัวยึดตำแหน่ง ” เพื่อเข้าถึงข้อความของตัวยึดตำแหน่งอินพุตและตั้งค่าสีเป็น “ rgb(17, 0, 255) ”
CSS
:: ตัวยึดตำแหน่ง {สี : rgb ( 17 , 0 , 255 ) ;
}
อย่างที่คุณเห็น สีของตัวยึดตำแหน่งอินพุตที่เพิ่มจะเปลี่ยนเป็นสีน้ำเงิน:
มีวิธีอื่นในการเปลี่ยนสีของตัวยึดตำแหน่งอินพุต มาลองดูกัน
วิธีที่ 2: เปลี่ยนสีตัวยึดตำแหน่งอินพุตโดยใช้ '::-webkit-input-placeholder' Pseudo-class Element
“ :: – webkit-input-placeholder ” องค์ประกอบคลาสหลอกเป็นหลักแสดงถึงข้อความตัวแทนขององค์ประกอบแบบฟอร์ม สามารถใช้โดยนักออกแบบธีมและนักพัฒนาเพื่อปรับแต่งรูปลักษณ์ของข้อความตัวแทน นอกจากนี้ โดยการใช้องค์ประกอบที่ระบุ ผู้ใช้สามารถปรับเปลี่ยนสีของตัวยึดตำแหน่งอินพุตได้
ไวยากรณ์
ไวยากรณ์ของ ::-webkit-input-placeholder ได้รับเป็น:
:: -webkit-input-placeholder {สี : ค่า
}
ในสถานที่ของ “ ค่า ” คุณสามารถกำหนดสีของตัวยึดตำแหน่งอินพุตได้
มาดูตัวอย่างกันเพื่อทำความเข้าใจองค์ประกอบระดับหลอกที่กล่าวถึงข้างต้น
ตัวอย่าง
ในไฟล์ CSS ให้ใช้ “ ::-webkit-input-placeholder ” pseudo-class element และกำหนดค่าของสีเป็น “ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {สี : rgb ( 255 , 13 , 13 ) ;
}
เอาท์พุต
ที่นี่ คุณจะเห็นว่าสีเริ่มต้นของตัวแทนการป้อนข้อมูลมีการเปลี่ยนแปลง
บทสรุป
สีของตัวยึดตำแหน่งอินพุตจะเปลี่ยนโดยใช้ปุ่ม “ ::ตัวยึดตำแหน่ง ” ตัวเลือกและ “ :: – webkit-input-placeholder ” องค์ประกอบระดับหลอก เมื่อใช้สิ่งนี้ คุณสามารถเปลี่ยนสีเริ่มต้นของตัวยึดตำแหน่งอินพุตได้ ในบทความนี้ เราได้อธิบายขั้นตอนที่เกี่ยวข้องกับการเปลี่ยนสีของตัวยึดตำแหน่งอินพุตโดยใช้คุณสมบัติ CSS