4.1 Pseudo-class :checked
Các pseudo-class của form trong CSS cung cấp khả năng cho việc stylize các phần tử form dựa trên trạng thái của chúng.
Những pseudo-class này cho phép tạo ra các form tương tác và dễ tiếp cận, cải thiện giao diện người dùng và trải nghiệm.
Hãy cùng tìm hiểu kĩ hơn về các pseudo-class :checked, :disabled, :enabled và :invalid.
Pseudo-class :checked áp dụng cho các phần tử form đang ở trạng thái "được chọn". Điều này liên quan đến các ô checkbox
(<input type="checkbox">), nút radio (<input type="radio">) và các option (<option>).
Cú pháp:
selector:checked {
properties: values;
}
Ví dụ sử dụng
Trong ví dụ này, các ô checkbox, nút radio và option được chọn sẽ nhận màu nền tương ứng khi ở trạng thái "được chọn":
/* Stylize checkbox được chọn */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stylize nút radio được chọn */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stylize option được chọn */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudo-class :disabled
Pseudo-class :disabled áp dụng cho các phần tử form đang ở trạng thái bị vô hiệu. Điều này hữu ích để
stylize các phần tử tạm thời không khả dụng để tương tác.
Cú pháp:
selector:disabled {
properties: values;
}
Ví dụ sử dụng
Trong ví dụ này, các trường nhập liệu và nút bị vô hiệu sẽ nhận màu nền, viền và màu chữ tương ứng, cũng như thay đổi con trỏ thành "bị cấm":
/* Stylize trường nhập liệu bị vô hiệu */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stylize nút bị vô hiệu */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudo-class :enabled
Pseudo-class :enabled áp dụng cho các phần tử form đang ở trạng thái được kích hoạt.
Điều này cho phép stylize các phần tử có thể tương tác.
Cú pháp:
selector:enabled {
properties: values;
}
Ví dụ sử dụng
Trong ví dụ này, các trường nhập liệu và nút được kích hoạt sẽ nhận màu nền, viền và màu chữ tương ứng, cũng như thay đổi con trỏ thành "pointer":
/* Stylize trường nhập liệu được kích hoạt */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stylize nút được kích hoạt */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudo-class :invalid
Pseudo-class :invalid áp dụng cho các phần tử form không vượt qua được validation. Điều này cho phép stylize
các trường nhập liệu chứa dữ liệu không hợp lệ.
Cú pháp:
selector:invalid {
properties: values;
}
Ví dụ sử dụng
Trong ví dụ này, các trường nhập liệu và trường văn bản không hợp lệ sẽ nhận màu viền và nền tương ứng để hiển thị một cách trực quan rằng dữ liệu không vượt qua được validation:
/* Stylize trường nhập liệu không hợp lệ */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stylize trường văn bản không hợp lệ */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Ví dụ thực hiện đầy đủ
/* Stylize checkbox được chọn */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stylize nút radio được chọn */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stylize trường nhập liệu bị vô hiệu */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stylize nút bị vô hiệu */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Stylize trường nhập liệu được kích hoạt */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stylize nút được kích hoạt */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Stylize trường nhập liệu không hợp lệ */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stylize trường văn bản không hợp lệ */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ các pseudo-class của form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION