<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tui-checkbox:checked {
background:#2ACC95;
}
.tui-checkbox {
width:14px;
height:14px;
background-color:#ffffff;
border:solid 2px #dddddd;
-webkit-border-radius:50%;
border-radius:50%;
font-size:0.8rem;
margin:0;
padding:0;
position:relative;
display:inline-block;
vertical-align:top;
cursor:default;
-webkit-appearance:none;
-webkit-user-select:none;
user-select:none;
-webkit-transition:background-color ease 0.1s;
transition:background-color ease 0.1s;
outline: none;
}
.tui-checkbox:checked::after {
content:'';
top:3px;
left:2px;
position:absolute;
background:transparent;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:3px;
width:6px;
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
</style>
</head>
<body>
<input name="checkbox" value="Item 1" type="checkbox" class="tui-checkbox ">
</body>
</html>
input输入框check多选框样式变圆形
最新推荐文章于 2023-11-15 10:01:19 发布