Em hãy thực hiện các yêu cầu dưới đây.
1. Đị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.
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;
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.
3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.
Quảng cáo
1 câu trả lời 193
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;
}
Quảng cáo
Bạn cần hỏi gì?
Câu hỏi hot cùng chủ đề
-
Đã trả lời bởi chuyên gia
149631 -
Đã trả lời bởi chuyên gia
99998 -
Đã trả lời bởi chuyên gia
97612 -
Đã trả lời bởi chuyên gia
80300 -
Đã trả lời bởi chuyên gia
73097 -
Đã trả lời bởi chuyên gia
56190 -
Đã trả lời bởi chuyên gia
55568
