1. Thực hiện định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của Thực hành.

- Đối với hộp kiểm, khai báo vùng chọn để định kiểu cho trạng thái được chọn: input[type="checkbox"]: checked {

}

accent-color: #007bff;

Với khai báo này, khi người dùng nháy chọn, hộp kiểm sẽ có dạng

- Đối với nút, khai báo vùng chọn để định kiểu cho trạng thái hover và active:

button[type="submit"]:hover {

}

background-color: #0056b3;

button[type="submit"]:active { background-color: #ff0000;

}

2. Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:

- Hai văn bản để nhập Tên tài khoản và Mật khẩu;

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;

rocksen trò

an

input[type="text"]: focus {outline: 2px solid #007bff;

}

- Một hộp kiểm Ghi nhớ thông tin đăng nhập; Một nút nhấn Đăng nhập; Một đường liên kết Quên mật khẩu.

input[type="radio"]: checked {

}

background-color: #007bff;

input[type="checkbox"]: checked { accent-color: #007bff;

}

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;

3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

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: #005663;

button[type="submit"]: focus { outline: yellow;

}

"T-sctave a trời sáng tạo

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

}