Get Adobe Flash player

CSS : การเน้น text input เวลาทำการกรอกข้อมูล

ปกติเมื่อมีการใช้งาน text input หากไม่มีการตกแต่งใดๆ ในขณะที่ทำการที่กรอกข้อมูลลงไป textbox input ก็จะมีรูปลักษณ์ไม่ต่างไปจากตอนที่ไม่ได้กรอกข้อมูล แต่ถ้าหากต้องการเพิ่มลูกเล่นให้ text input มีการเน้นจุดที่ทำการกรอกข้อมูล ก็สามารถทำได้โดยกำหนดค่า input ภายใต้ <style>…</style> แล้วใช้โค้ดนี้

input[type=ประเภทtextbox]:focus {
ลักษณะ text input ที่ต้องการ เช่น สี สีขอบ ความหนาของขอบ ฯลฯ;
}

 

ตัวอย่างการใช้งาน (สมมติกำหนดให้ input 2 ประเภทแสดงผลต่างกัน)

 

จะได้ผลลัพธ์ดังนี้

– เมื่อทำการกรอกส่วนที่เป็นประเภท text
ส่วนที่ทำการกรอกข้อมูลจะขึ้นขอบสีดำหนารอบตัว text input ตามที่ตั้งค่าไว้ว่า border: 3px solid #555

– เมื่อทำการกรอกส่วนที่เป็นประเภท password
ส่วนที่ทำการกรอกข้อมูลจะมีพื้นหลังสีเหลืองอ่อนภายใน text input ตามที่ตั้งค่าไว้ว่า background-color: lightyellow

จะเห็นได้ว่า สิ่งที่ทำให้ text input ทั้งสองประเภทแสดงผลลัพธ์ต่างกัน อยู่ที่คำสั่งภาย :focus ของ input แต่ละชนิดนั่นเอง
ซึ่งการกำหนด input[type=???]:focus ก็ต้องสอดคล้องกับ type=”???”  ที่เซตบนตัว input ด้วย

Leave a Reply

Your email address will not be published. Required fields are marked *