Với CSS3, chúng tôi có thể tùy chỉnh các bản trình bày web thành hầu hết mọi thứ mà chúng tôi muốn. Trong bài đăng này, như tiêu đề đã nói, chúng tôi sẽ tùy chỉnh giao diện của hộp kiểm và đầu vào radio.

Hai loại đầu vào này là một vài phần tử biểu mẫu hơi phức tạp để tạo kiểu (để đạt được sự giống nhau trên các nền tảng khác nhau) – Windows, OS X và Linux có thiết kế riêng để hiển thị các phần tử biểu mẫu này.

Nếu bạn muốn tùy chỉnh hai phần tử biểu mẫu này, thì hướng dẫn này là dành cho bạn. Vậy hãy bắt đầu.

Đánh dấu HTML

Chúng tôi bắt đầu bằng cách tạo một tài liệu HTML mới. Cấu trúc HTML như sau.

Đầu vào radio

. <div >
	<input  type="radio" name="gender" value="male">
	<label for="male">Male</label>
	<input  type="radio" name="gender" value="female">
	<label for="female">Female</label>
</div>

Đầu vào hộp kiểm

. <div >
	<input  type="checkbox" name="check" value="check1">
	<label for="check1">Checkbox No. 1</label>
	<br>
	<input  type="checkbox" name="check" value="check2">
	<label for="check2">Checkbox No. 2</label>
</div>

CSS

Chúng ta đã hoàn thành với cấu trúc HTML, vì vậy bây giờ hãy đặt các kiểu cho những <input>. Đầu tiên chúng tôi sẽ tùy chỉnh loại đầu vào radio. Ý tưởng là biến thiết kế hệ điều hành mặc định thành như trong ảnh chụp màn hình bên dưới.


Kiểu đầu vào Radio

Trước hết, chúng tôi chuyển con trỏ nhãn thành một con trỏ để chỉ ra rằng nó có thể nhấp được rồi chuyển sang các kiểu trang trí khác.

. label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
}

Sau đó, chúng tôi sẽ ẩn loại radio đầu vào.

. input[type=radio] {
	display: none;
}

Và chúng tôi thay thế loại radio đầu vào ẩn bằng phần tử giả :before.

. label:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

Các kiểu trên thực tế cũng áp dụng cho kiểu nhập hộp kiểm. Sự khác biệt duy nhất là kiểu đầu vào vô tuyến là một vòng tròn. Để đạt được hiệu ứng, chúng tôi thêm bán kính đường viền một kích thước bán kính bằng một nửa chiều cao và chiều rộng.

. radio label:before {
	border-radius: 8px;
}

Ở giai đoạn này, đây là kiểu đầu vào radio của chúng ta trông như thế nào.


Bây giờ, chúng tôi thêm vòng tròn nhỏ bên trong khi đầu vào này được kiểm tra. Chúng tôi sẽ sử dụng CSS3: lớp giả đã kiểm tra cùng với ký tự Bullet HTML (& # 8226;). Dấu đầu dòng này sẽ được phân phối thông qua thuộc tính nội dung, do đó chúng tôi cần chuyển đổi ký tự HTML này cho CSS bằng Công cụ chuyển đổi thực thể.

. input[type=radio]:checked + label:before {
    content: "2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

Vì vậy, khi radio đầu vào (bị ẩn) được chọn hoặc được chọn, một vòng tròn nhỏ hơn sẽ xuất hiện, như được hiển thị trong ảnh chụp màn hình sau.


Ngoài ra, bạn cũng có thể sử dụng một hình ảnh và hiển thị nó thông qua background-image trong: before pseudo-element mà chúng tôi đã thêm trước đó. Tôi đã không sử dụng cái này vì Sở thích của tôi là không sử dụng hình ảnh, nếu có thể.

Đầu vào hộp kiểm tạo kiểu

Bây giờ, chúng tôi thêm kiểu vào kiểu nhập hộp kiểm. Đầu tiên, chúng tôi cũng ẩn phần tử đầu vào.

. input[type=checkbox] {
	display: none;
}

Vì chúng tôi đã thay thế đầu vào bằng: befor e phần tử giả trước đây, bây giờ chúng ta chỉ cần thêm bán kính đường viền.

. .checkbox label:before {
	border-radius: 3px;
}

Tiếp theo, chúng tôi sẽ thêm dấu đã chọn giống như cách chúng tôi đã làm với loại đầu vào radio. Lần này chúng tôi sử dụng Kiểm tra Đánh dấu Ký tự HTML (& # 10003;).

. input[type=checkbox]:checked + label:before {
	content: "2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
    line-height: 15px;
}

Và đây là cách hộp kiểm của chúng ta bây giờ trông như thế nào.


Suy nghĩ cuối cùng

Đây chỉ là một kỹ thuật để tùy chỉnh hộp kiểm và kiểu đầu vào radio và chắc chắn bạn có thể cải thiện giao diện để trở nên tuyệt đẹp hơn. Ngoài ra, Vì chúng tôi đã sử dụng CSS3: đã kiểm tra, nên kỹ thuật này sẽ chỉ hoạt động trong các trình duyệt hỗ trợ nó. Vì vậy, nếu thích, bạn cũng có thể sử dụng jQuery Plugin.

Cuối cùng, bạn có thể xem bản demo và tải xuống mã nguồn từ các liên kết bên dưới.

Chúng tôi hy vọng bài viết này đã giúp bạn thiết kế giao diện người dùng: Cách tùy chỉnh hộp kiểm và nút radio với CSS3. Nếu bạn có bất kỳ câu hỏi nào khác, chúng tôi sẽ sẵn lòng trả lời bạn; xin vui lòng liên hệ với chúng tôi trong phần dưới đây. Đừng quên chia sẻ driveria.net với gia đình và bạn bè của bạn!