Em hãy liệt kê một số trạng thái của các thành phần trong biểu mẫu và nêu cách khai báo vùng chọn để định kiểu cho chúng.

Mở tệp gopy.html ở Ví dụ 2 trong Bài F5 và thêm liên kết đến tệp style.css. Ta lần lượt định kiểu cho từng loại thành phần của biểu mẫu trong lập style.css như sau:

1. Định kiểu cho thẻ <form).

form {

}

max-width: 400px;

margin:0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 10px;

Khai báo vùng chọn này định kiểu cho biểu mẫu có độ rộng tối đa là 400 pixels, nền màu trắng, đường viền màu xám.

2. Định kiểu cho hộp văn bản nhập Họ tên và Lớp.

input[type="text"] {

display: block;

box-sizing: border-box;

width: 100%;

background-color: #f4f4f4;

border: none;

}

border-radius: 20px; padding: 10px;

margin: 10px 0 10px 0;

trock an trời sáng tạo

input[type="text"]: focus

}

outline: 2px solid #007bff;

Khai báo vùng chọn này định kiểu cho hộp văn bản có nền màu xám và không có đường viền.

3. Định kiểu cho trạng thái được chọn của các nút tròn và hộp kiểm.

input[type="radio"]: checked {

}

background-color: #007bff;

input[type="checkbox"]: checked {

}

accent-color: #007bff;

4. Định kiểu cho hộp văn bản góp ý.

textarea {

box-sizing: border-box; width: 100%;

background-color: #f4f4f4;

border: none;

}

border-radius: 20px; padding: 10px; resize: vertical;

textarea: focus {

}

outline: 2px solid #007bff;

Thuộc tính resize cho phép thay đổi kích thước của hộp văn bản theo chiều dọc.

5. Định kiểu cho nút nhấn Gửi

button[type="submit"] {

width: 25%;

color: #fff;

background-color: #007bff;

border: none;

border-radius: 20px; padding: 10px 20px; margin: 10px auto; cursor: pointer;

}

button[type="submit"]:hover {

background-color: #0056b3;

}

button[type="submit"]: focus {

outline: yellow;

}

button[type="submit"]: active background-color: #4ff4a2;

+ trời sáng tạo

}

6. Nháy đúp chuột vào tệp gopy.html để kiểm tra kết quả.

Khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea:

Input [type="text"]:focus {

Outline: 2px solid #007bff;

}