css修改input的 checkbox 选中样式

实现的效果:

在这里插入图片描述

代码如下:

//可以使用 lable 标签的for属性,绑定到input标签上(for属性应对应到input标签中的id)
//这是题外话,我这边没有这一项操作。
<div class="check">
  <label class="label">
    <span class="span"></span>
    <input class="input" type="checkbox" />我是选项1
  </label>
  <label class="label">
    <span class="span"></span>
    <input class="input" type="checkbox" />我是选项2
  </label>
</div>	

css样式设置:

.label{
	display: block;
	padding: 5px 0;
}
.input{
	outline: none;
	appearance:none;/*改变任何元素的浏览器默认风格*/	
	-webkit-appearance: none;
}
.span{
	background: url(img/[email protected]) no-repeat 0/100% 100%;
	height: 15px;
	width: 15px;
	display: inline-block;
	border-radius: 50%;
}

你可能感兴趣的:(css)