Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

CSS Input - Tùy Chỉnh Style Cho Form Nhập Liệu

Web form thu thập thông tin người dùng (email đăng ký, tên...). CSS giúp tạo form đẹp, thân thiện.

HTML Input Và CSS

HTML định nghĩa cấu trúc form (<input>, <label>), CSS trang trí.

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

CSS Input - Tùy Chỉnh Style Cho Form Nhập Liệu

Input mặc định khá đơn giản. CSS sẽ biến nó đẹp hơn.

Các Kỹ Thuật Style Input Phổ Biến

1. Đặt Chiều Rộng (Width)

input { width: 50%; }

Input chiếm 50% chiều rộng container.

2. Thêm Viền (Border)

input { border: 3px solid lightblue; }

Viền xanh nhạt 3px quanh input.

3. Chỉ Viền Dưới (Bottom Border)

input { border-bottom: 3px solid lightblue; }

Chỉ hiện gạch chân, style hiện đại.

4. Padding - Khoảng Cách Nội Dung Với Viền

input { padding: 10px 15px; box-sizing: border-box; }

Trên/dưới 10px, trái/phải 15px. box-sizing: border-box đảm bảo padding tính trong width tổng.

5. Style Khi Focus (:focus)

Mặc định click vào input hiện outline xanh. Tùy chỉnh:

input:focus {
  outline: none;
  border-bottom: 3px solid lightgray;
}

Click vào → gạch chân xám nhạt 3px, bỏ outline mặc định.

6. Bo Góc (Rounded Corners)

input { border: 3px solid lightgray; border-radius: 10px; }

Viền xám + bo góc 10px.

7. Màu Nền (Background Color)

input { border: 3px solid lightgray; background-color: lightblue; }

Nền xanh nhạt, viền xám.

Áp dụng Style Cho Loại Input Cụ Thể

Dùng attribute selector:

  • input[type=text]: Chỉ text field
  • input[type=email]: Chỉ email field
  • input[type=password]: Chỉ password field
  • input[id=userName]: Chỉ element có id="userName"

Kết Luận

HTML tạo cấu trúc form, CSS tùy biến giao diện: width, border, padding, focus, border-radius, background... Bạn đã có công cụ tạo form đẹp, chuyên nghiệp!