Đôi khi khi chúng tôi tạo biểu mẫu, chúng tôi cần sử dụng đầu vào hộp kiểm và nút radio để thu thập tùy chọn của người dùng, đồng ý với các điều khoản hoặc dữ liệu nhân khẩu học. Các phần tử đầu vào HTML như hộp kiểm hoặc nút radio có giao diện mặc định. Nếu bạn muốn thay đổi giao diện, bạn có thể sử dụng CSS để tùy chỉnh giao diện theo ý thích của mình. Bài viết này sẽ chỉ cho bạn một mẫu về cách tùy chỉnh hộp kiểm và đầu vào radio cho biểu mẫu hoặc trang web của bạn.
Thiết lập HTML
Mã khung HTML mà chúng tôi sẽ tạo kiểu về cơ bản là giống nhau cho cả hộp kiểm và nút radio.
Vùng chứa chính của chúng tôi cho một hộp kiểm / nút radio sẽ là phần tử nhãn HTML. Bên trong nhãn đó, chúng ta sẽ có một phần tử đầu vào với loại thích hợp của nó và một phần tử span sẽ cho biết liệu phần tử đã được chọn hay chưa.
<html>
<head>
<style>
/* No CSS Here Yet. */
</style>>
</head>
<body>
<h2>Radio Button and Checkbox CSS Example</h2>
<label class="input">One
<input type="radio" name="radio-example" checked="checked">
<span class="checkmark fill"></span>
</label>
<label class="input">Two
<input type="radio" name="radio-example">
<span class="checkmark fill"></span>
</label>
<label class="input">Three
<input type="radio" name="radio-example">
<span class="checkmark fill"></span>
</label>
<h2>Checkbox Example</h2>
<label class="input">Four
<input type="checkbox" name="radio-example">
<span class="checkmark fill"></span>
</label>
<label class="input">Five
<input type="checkbox" name="radio-example">
<span class="checkmark fill"></span>
</label>
<script href="script.js"></script>
</body>
</html>
Tập hợp đầu vào đầu tiên trong đánh dấu ở trên là các nút radio. Bạn sẽ sử dụng các nút radio cho các biểu mẫu khi người dùng cần chọn chỉ một lựa chọn từ nhiều lựa chọn.
Bộ thứ hai là các hộp kiểm. Hộp kiểm được sử dụng khi người dùng có thể chọn nhiều lựa chọn nếu họ muốn từ một loạt các lựa chọn. Chúng cũng được sử dụng ở những điểm mà người dùng chỉ cần đồng ý / không đồng ý hoặc có / không với điều gì đó.
Các phần tử HTML này có giao diện mặc định. Nếu bạn muốn tùy chỉnh chúng, bạn chắc chắn có thể làm được điều đó! Bạn có thể sử dụng CSS để điều chỉnh kiểu:
Thiết lập CSS
Để thay đổi kiểu của các nút radio hoặc hộp kiểm của bạn, bạn phải giải quyết vấn đề theo các bước sau:
- Tùy chỉnh nhãn
- Hiển thị thuộc tính
- Vị trí tương đối
- Con trỏ con trỏ
- Lề và đệm để làm cho nó đẹp mắt về mặt thẩm mỹ
- Ẩn hộp kiểm mặc định
- Hiển thị thuộc tính
- Tạo một vùng chứa sẽ là hộp kiểm tùy chỉnh
- Chiều cao
- Chiều rộng
- Bối cảnh
- Vị trí - tuyệt đối
- Các giá trị trên cùng, bên trái được đặt
- Thêm điều gì đó đặc biệt sẽ xảy ra khi di chuột (tức là thay đổi màu nền của hộp kiểm)
- Thay đổi màu nền khi hộp hoặc nút được chọn
- Ẩn dấu kiểm hoặc vòng tròn khi không được chọn
- Hiển thị dấu kiểm hoặc vòng kết nối khi được chọn
- Tạo kiểu cho dấu kiểm
- Tạo kiểu cho vòng tròn
Trước khi xem mã bên dưới, tôi khuyên bạn nên thử tự tìm hiểu nó với HTML khung và bảng phân tích các bước để giải quyết vấn đề ở trên.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Mã giải pháp:
<html>
<head>
<style>
/* Customize the label (the input) */
label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox container */
.checkmark, .link {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* Add border radius for the radio button */
.circle {
border-radius: 50%;
}
/* On mouse-over, add a background color */
label:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
label input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/circle (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
label input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark */
label .checkmark:after {
left: 10px;
top: 3px;
width: 5px;
height: 15px;
border: solid white;
border-width: 0 3px 3px 0;
/* always check to see if you need to use the css browser prefixes */
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Style the radio button circle */
label .circle:after {
width: 15px;
height: 15px;
/* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */
border: none;
background: white;
border-radius: 50%;
left: 20%;
top: 20%;
}
</style>
</head>
<body>
<h2>CSS Radio Button and Checkbox Example</h2>
<label class="input">One
<input type="radio" name="radio-example" checked>
<span class="checkmark circle"></span>
</label>
<label class="input">Two
<input type="radio" name="radio-example">
<span class="checkmark circle"></span>
</label>
<label class="input">Three
<input type="radio" name="radio-example">
<span class="checkmark circle"></span>
</label>
<h2>Checkbox Example</h2>
<label class="input">Four
<input type="checkbox" name="radio-example" checked>
<span class="checkmark"></span>
</label>
<label class="input">Five
<input type="checkbox" name="radio-example">
<span class="checkmark"></span>
</label>
<label class="input">Six
<input type="checkbox" name="radio-example">
<span class="checkmark"></span>
</label>
</body>
</html> Đây là bạn có nó; ví dụ về các nút radio và hộp kiểm trong CSS. Điều này có thể khiến bạn cảm thấy hơi bối rối lúc đầu, nhưng bạn sẽ hiểu được! Nếu bạn có thể vượt qua bài tập CSS này, bạn đã sẵn sàng để chuyển sang các chủ đề khó hơn.