最简单手机端美化复选框input的方式

前端 2021-07-26

很简单的方式处理美化input checkbox 复选框的美化方式，不需要任何js或图片，兼容性也很强

1.jpg

2.jpg

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
  name="viewport" />
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
.checkbox {
  position: relative;
  height: 30px;
}
.checkbox input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
}
.checkbox label {
  position: absolute;
  left: 30px;
  top: 0;
  height: 20px;
  line-height: 20px;
}
.checkbox label:before {
  content: '';
  position: absolute;
  left: -30px;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.checkbox label:after {
  content: '';
  position: absolute;
  left: -22px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: 0;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #fff;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
.checkbox input[type='checkbox']:checked+label:before {
  background: #4cd764;
  border-color: #4cd764;
}
.checkbox input[type='checkbox']:checked+label:after {
  background: #4cd764;
}
</style>
<body>
<div class='checkbox'>
  <input type='checkbox' id='checkbox1' name='checkboox[]'>
  <label for='checkbox1'>鹿角海棠</label>
</div>
<div class='checkbox'>
  <input type='checkbox' id='checkbox2' name='checkboox[]'>
  <label for='checkbox2'>青凤凰</label>
</div>
<div class='checkbox'>
  <input type='checkbox' id='checkbox3' name='checkboox[]' checked>
  <label for='checkbox3'>冬美人</label>
</div>
</body>
</html>