Style cho radio button với CSS3

Radio button là 1 thành phần HTML thường được sử dụng khá nhiều trong trang web. Tuy nhiên, dạng mặc định của radio button nhìn khá thô sơ và không đẹp mắt. Hôm nay, mình xin hướng dẫn các bạn cách để style cho radio button trở nên đẹp hơn với việc chỉ cần dùng CSS3 chứ không cần phải sử dụng đến Javascript.

Thực hiện

Đầu tiên, ta có cấu trúc HTML cho 2 radio button như sau:

<div class="container">	
	<h2>Radio button style</h2>	
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">HTML</label>    
    <div class="check"></div>
  </li>  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">CSS</label>
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

Trong cấu trúc HTML trên, với mỗi thành phần li có input là 1 radio button, ta thêm 1 thẻ div cùng cấp với thẻ input. Thẻ div này sẽ đóng vai trò cực kỳ quan trọng là hiển thị thay thế cho 2 radio button mặc định, còn cụ thể thực hiện như thế nào chúng ta sẽ cùng tìm hiểu ngay sau đây. Tiếp theo, ta dùng CSS để style cho các thành phần bao ngoài radio button để cho dễ nhìn hơn.

.container{
  display: block;
  position: absolute;
  margin: auto;
  height: 450px;
  width: 400px;
  bottom: 0; left:0; right: 0; top:0;
  padding: 0;
}
h2 {
  color: #AAAAAA;
  font-weight: normal;
}
.container ul{
  list-style: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #111111;
}

Bây giờ là việc quan trọng nhất, xử lý sự kiện cho radio button Ý tưởng ở đây sẽ là ta sẽ dùng CSS ẩn radio button mặc định của HTML đi, dựa vào sự kiện :checked và :unchecked của radio button, sau đó dùng CSS3 để bắt sự kiện của radio button và kết hợp style cho thẻ div class=check, từ đó dùng CSS3 để xử lý cho thẻ div này hoạt động giống như 1 radio button. Trước tiên, ta ẩn radio button mặc định đi.

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

Style cho label và thẻ <div class='check'>

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
ul li:hover label{
	color: #FFFFFF;
}
ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
ul li:hover .check {
  border: 5px solid #FFFFFF;
}
ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

Cuối cùng là phần quan trọng nhất, xử lý sự kiện :checked của radio button kết hợp với thẻ <div class='check'>

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}
input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

Trong đoạn CSS trên ta kết hợp sự kiện của radio button là checked và <div class='check'> thông qua sự kết các elements HTML của CSS bằng cú pháp ~. Khi lick vào radio button thì sẽ sinh ra sự kiện là checked, ta sẽ dựa vào đó để style cho <div class='check'> thông qua sự kiện của radio button. Trên đây là bài viết ngắn mình muốn giới thiệu cho mọi người 1 số tính năng khá hữu dụng khi kết hợp giữa HTML và CSS(CSS3). Xin cảm ơn mọi người đã đọc bài viết. Tham khảo: https://codepen.io/AngelaVelasquez/pen/Eypnq