CSS Input: จัดสไตล์ฟอร์ม Input Fields ด้วย CSS

Web forms สำคัญสำหรับเว็บไซต์หลายแห่ง รับข้อมูลจากผู้ใช้ เช่น อีเมลสำหรับสมัคร newsletter

ด้วย CSS สามารถจัดสไตล์ form inputs สร้างฟิลด์สวยงามสำหรับผู้เยี่ยมชม

บทเรียนนี้อธิบายพื้นฐาน HTML inputs และการจัดสไตล์ input fields ด้วย CSS จนจบคุณจะจัดสไตล์ input fields อย่างเชี่ยวชาญ

HTML และ CSS Input

กำหนดฟอร์มด้วย HTML โครงสร้างฟอร์ม (ฟิลด์อะไร ที่ไหน) แล้ว CSS จัดสไตล์

ใน HTML <input> tag ใช้รับ user input Syntax พื้นฐาน:

<input type="typeOfInput">

CSS Input: จัดสไตล์ฟอร์ม Input Fields ด้วย CSS — Input field พื้นฐาน

ตัวอย่างฟิลด์รับชื่อ:

<label for="userName">Name</label>
<input type="text" name="userName">

ใช้ default HTML styles ค่อนข้างพื้นฐาน ใช้ <label> เพื่อ label ฟอร์ม CSS จะช่วยจัดสไตล์ให้สวยงาม

ตัวอย่างการจัดสไตล์ Input ด้วย CSS

1. กำหนดความกว้าง (Width)

ฟอร์มกว้าง 50% ของหน้าเว็บ

<html>
  <label for="userName">Name</label>
  <input type="text" name="userName">
</html>

<style>
  input { width: 50%; }
</style>

2. Input พร้อมขอบ (Border)

ขอบสีฟ้าอ่อน 3px (สีประจำคลับ)

<style>
  input { border: 3px solid lightblue; }
</style>

3. Input พร้อมขอบเฉพาะด้านล่าง (Bottom Border)

ใช้ border-bottom แทน

<style>
  input { border-bottom: 3px solid lightblue; }
</style>

4. Input พร้อม Padding

พื้นที่ระหว่างเนื้อหาและขอบ: บน-ล่าง 10px, ซ้าย-ขวา 15px

<style>
  input { padding: 10px 15px; box-sizing: border-box; }
</style>

box-sizing: border-box ให้ padding รวมอยู่ใน width ทั้งหมด

5. สไตล์เมื่อ Focus (คลิกเข้าฟิลด์)

เบราว์เซอร์ default มี outline สีน้ำเงิน ใช้ :focus selector ปรับแต่ง

ขอบด้านล่างสีเทาอ่อน 3px เมื่อ focus

<style>
  input:focus {
    outline: none;
    border-bottom: 3px solid lightgray;
  }
</style>

outline: none ปิด default blue outline

6. Input พร้อมมุมโค้ง (Rounded Corners)

ขอบสีเทาอ่อน 3px + มุมโค้ง

<style>
  input { border: 3px solid lightgray; border-radius: 10px; }
</style>

7. Input พร้อมสีพื้นหลัง (Background Color)

ขอบสีเทา 3px + พื้นหลังสีฟ้าอ่อน

<style>
  input { border: 3px solid lightgray; background-color: lightblue; }
</style>

Apply Styles to Specific Input Fields (เฉพาะบางประเภท)

ใช้ attribute selectors แทน input ทั่วไป:

input[type=text] — text fields ทั้งหมด
input[type=email] — email fields ทั้งหมด
input[type=password] — password fields ทั้งหมด
input[id=userName] — element ที่มี ID userName

สรุป

HTML กำหนดโครงสร้างฟอร์ม CSS จัดสไตล์ บทเรียนนี้ครอบคลุม: width, border, bottom border, padding, :focus styles, rounded corners, background color, และ attribute selectors ตอนนี้คุณจัดสไตล์ input fields ด้วย CSS อย่างเชี่ยวชาญแล้ว!