美化单选框和复选框

技术要点：主要运用伪类选择器:checked，设置单选或复选按钮选中时的样式，加号'+'相邻兄弟选择器，选中后面的兄弟节点

单选框样例：

css代码：background-clip规定背景的绘制区域，值为content-box表示背景被裁剪到内容框

label{margin-right:50px;}
.circle{display:inline-block;vertical-align:middle;width:15px;height:15px;border-radius:50%;border:1px solid #ddd;}
input[type='radio']:checked+.circle{padding:2px;background:red;box-sizing:border-box;border-color:red;background-clip:content-box;}

 

html代码：

<label>
    男
    <input type="radio" hidden name="sex" checked="checked">
    <span class="circle"></span>
</label>
<label>
    女
    <input type="radio" hidden name="sex">
    <span class="circle"></span>
</label>

 

效果图：

 

复选框样例：

css:

label{margin-right:50px;}
.square{display:inline-block;vertical-align:middle;width:15px;height:15px;border-radius:5px;border:1px solid #ddd;}
input[type='checkbox']:checked+.square:after{content: '✓';font-size: 16px;font-weight: bold;line-height: 15px;display: block;color:green;}

html:

<label>
    篮球
    <input type="checkbox" hidden >
    <span class="square"></span>
</label>
<label>
    足球
    <input type="checkbox" hidden >
    <span class="square"></span>
</label>

效果图：

 

转载于:https://www.cnblogs.com/hesj/p/10535614.html