<head>
<style>
* {
margin: 0px;
padding: 0px;
}
input {
margin: 20px;
border: 0px;
outline: 0px!important;
background-color: transparent;
appearance: none;
}
input[type=checkbox]:checked:before {
width: 20px;
height: 20px;
background: url("./1.png") no-repeat center;
background-size: 100% 100%;
content: '';
line-height: 20px;
text-align: center;
display: block;
color: white;
font-size: 20px;
border-radius: 100%;
border: 1px solid gray;
}
input[type=checkbox]:before {
width: 20px;
height: 20px;
background-color: yellow;
content: '';
display: block;
border-radius: 100%;
border: 1px solid gray;
}
</style>
<script>
</script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<input type="checkbox"></input>
</body>
</html>
