CSS Input Type Selector: จัดสไตล์ฟอร์มด้วย Attribute Selectors

สร้างฟอร์มที่ 독특และน่าสนใจเพื่อ UX ที่ดี ใช้ CSS input type selectors จัดสไตล์

ไวยากรณ์และตัวอย่าง

ไวยากรณ์พื้นฐาน:

input[type="type"] { /* styles */ }

จัดสไตล์ Text Inputs

input, label { font-size: 2rem; padding: 1rem; }
input[type="text"] { border: 0; border-bottom: 0.3rem solid mediumspringgreen; }
input[type="email"] { border: 0; border-left: 0.3rem solid mediumspringgreen; border-radius: 0.5rem; }

ลบ border ทั้งหมด เพิ่ม border เฉพาะด้านที่ต้องการ email เพิ่ม border-radius ทำให้โค้ง

ข้อควรระวัง: Dropdowns (Select)

input[type="select"] ไม่ทำงาน — ต้องใช้ select selector โดยตรง:

select { padding: 2rem; font-size: 2rem; width: 25rem; border: none; border-bottom: 0.3rem solid mediumspringgreen; }

Input Types อื่นๆ

ใช้ pattern เดียวกันกับ number และ date:

input[type="number"], input[type="date"] { border: 0; border-bottom: 0.3rem solid mediumspringgreen; }

เพียงไม่กี่บรรทัด CSS และ selectors เรียบง่าย ได้ฟอร์มสวยทันสมัย!

สรุป

ใช้ input[type="type"] จัดสไตล์แต่ละประเภท input (text, email, number, date) ส่วน select ใช้ selector ตรงๆ ลองปรับแต่งเพิ่มเติมใน Codepen