Tùy chỉnh CSS đẹp cho nút Input Radio và Checkbox

Điểm 4.6/5 dựa vào 87 đánh giá

Bài viết dưới đây chia sẻ cho các bạn đoạn code css giúp tùy biến cho nút Checkbox hay Radio trông đẹp mắt hơn, mặc định thì nút trong thẻ input có màu trắng đen đơn giản nên nhìn sẽ không đẹp mắt. Dưới đây là một cách đơn giản để bạn có thể tùy biến theo ý thích của mình cho nút này.

Nếu code mặc định khi bạn không tùy chỉnh CSS thì sẽ có dạng như bên dưới

<label class="container">One
<input checked="checked" type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox" />
<span class="checkmark"></span>
</label>

One Two
Three Four

Sau khi bạn thêm CSS tùy chỉnh sẽ có dạng như 2 đoạn code bên dưới:

1. Trường hợp đối với Checkbox:

<style>
/* The container */
.container {
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 */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>

<label class="container">One
<input checked="checked" type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox" />
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox" />
<span class="checkmark"></span>
</label>

<label class="container">Four
<input type="checkbox" />

<span class="checkmark"></span>
</label>

One Two Three Four 2. Trường hợp với nút Radio:

<style>
/* The container */
.container2 {
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 radio button */
.container2 input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Create a custom radio button */
.checkmark2 {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container2 input:checked ~ .checkmark {
background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark2:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.container2 input:checked ~ .checkmark:after {
display: block;
}

/* Style the indicator (dot/circle) */
.container2 .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<label class="container2">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark2"></span>
</label>
<label class="container2">Two
<input type="radio" name="radio">
<span class="checkmark2"></span>
</label>
<label class="container2">Three
<input type="radio" name="radio">
<span class="checkmark2"></span>
</label>
<label class="container2">Four
<input type="radio" name="radio">
<span class="checkmark2"></span>
</label>

One Two Three Four
Bây giờ thì bạn có thể tùy biến thay đổi màu sắc theo ý mình. Chúc bạn thành công!

Theo w3schools

Chuyên mục: Blogspot nâng cao Blogspot tips