CSS Forms

21/05/2019

Bài sau » « Bài trước

Một form được style với CSS. 

CSS Forms

Style input fields

Sử dụng thuộc tính width để xác định chiều rộng của thẻ input.

input { width: 100%; }

Ví dụ ở trên được áp dụng cho tất cả thẻ <input>. Nếu bạn muốn style cho từng input riêng thì bạn có thể dùng attribute selector :

  • input[type=text] - chỉ những input có type = text
  • input[type=password] - chỉ những input có type = password
  • input[type=number] -chỉ những input có type = number
  • ...

Padding input

Sử dụng thuộc tính padding để tạo thêm khoảng cách bên trong fields.

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }

Chú ý ở đoạn code trên có thuộc tính box-sizing: border-box; để đảm bảo rằng padding và border nằm trong tổng width, height của phần tử.

Borders input

Sử dụng thuộc tính border để thay đổi kích thước và màu sắc đường viền. Sử dụng border-radius để tạo bo tròn cho các góc.

input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid red; border-radius: 4px; }

Color input

Sử dụng thuộc tính background-color để thêm background cho input, và thuộc tính color để thay đổi màu chữ :

input[type=text] { background-color: #3CBC8D; color: white; }

Focus input

Theo mặc định, một số trình duyệt sẽ thêm đường viền màu xanh xung quanh thẻ input khi nó được focus (clicked). Bạn có thể loại bỏ hành vi này bằng cách thêm outline: none; vào thẻ input.

Sử dụng selector :focus để thay đổi bất cứ điều gì bạn muốn khi người dùng focus vào:

Ví dụ: thay đổi màu background khi focus:

input[type=text]:focus { background-color: lightblue; }

Ví dụ thay đổi màu đường viền:

input[type=text]:focus { border: 3px solid #333; }

Chèn icon/image vào input

Nếu bạn muốn chèn icon/image vào input thì có thể sử dụng background-image và sử dụng background-position để điều chỉnh vị trí.

input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 10px 20px 10px 40px; }

Animate input focus

Ta có thể sử dụng thuộc tính transition để làm hiệu ứng cho thẻ input khi focus vào. Chẳng hạn như ví dụ bên dưới: Đầu tiên ta cho thẻ input width: 100px; , sau đó khi focus vào ta cho width: 300px;

input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 10px 20px 10px 40px; width: 100px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 300px; }

Styling Textareas

Chú ý: Sử dụng thuộc tính resize để không cho textarea có thể thay đổi kích thước (disabled thanh kéo ở góc phải bottom).

textarea{ width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }

Styling Select

select{ width: 100%; border: none; border-radius: 4px; background-color: #f1f1f1; height: 30px; }

Thẻ option không thể style lại với CSS.

Styling Input Buttons

input[type=button], input[type=submit], input[type=reset] { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; } /* Tip: use width: 100% for full-width buttons */

Bài sau » « Bài trước
Back to top