效果如图
![](https://i-blog.csdnimg.cn/blog_migrate/71d0a9b1aa802ae479ac96d72cdd3845.png)
HTML代码
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./checkbox.css">
<style>
.title{
border-bottom: 1px solid #333;
}
.contain {
width: 300px;
border-radius: 20px;
display: flex;
margin-top: 10px;
margin-bottom: 20px;
}
.contain .cell{
flex: 1;
text-align: center;
position: relative;
align-items: center;
}
</style>
</head>
<body>
<div class="title">第一种:</div>
<div class="contain">
<div class="cell">
<input type="checkbox" id="color-input-red">
<label for="color-input-red" class="cb-label checked"></label>
</div>
<div class="cell">
<input type="checkbox" id="color-input-orange">
<label for="color-input-orange" class="cb-label checked"></label>
</div>
<div class="cell">
<input type="checkbox" id="color-input-yellow">
<label for="color-input-yellow" class="cb-label checked"></label>
</div>
<