因为使用了封装好的组件,html结构无法修改,实现思路把默认的样式隐藏掉,通过添加伪类的方法,显示伪类的样式。
需求效果图
![](https://i-blog.csdnimg.cn/blog_migrate/618754ba425655c09cdf9ff0bcbb88c8.png)
// html部分
<label class="radio-inline">
<input type="radio" name="radio" value="primary">小学
</label>
<label class="radio-inline">
<input type="radio" checked="true" name="radio" value="junior">初中
</label>
<label class="radio-inline">
<input type="radio" name="radio" value="senior">高中
</label>
.radio-inline{
height40px;
overflow: hidden;
}
.radio-inline input[type="radio"]{
position: absolute;
top: -40px;
}
.radio-inline input[type="radio"]::before {
content: " ";
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid #999;
box-sizing: border-box;
position: absolute;
top: 48px;
}
.radio-inline input[type="radio"]:checked::before {
background-color: red;
background-clip: content-box;
border: 1px solid red;
padding: 1px;
box-sizing: border-box;
}
需求效果图
![](https://i-blog.csdnimg.cn/blog_migrate/0dc6c27f7a861894817a0ae701525846.png)
<label class="checkbox-inline">
<input type="checkbox" checked="true" name="KnowWay" value="11" >地区会议微信公众号
</label>
<label class="checkbox-inline">
<input type="checkbox" name="KnowWay" value="1">学校
</label>
<label class="checkbox-inline">
<input type="checkbox" checked="true" name="KnowWay" value="4">培训机构
</label>
<label class="checkbox-inline">
<input type="checkbox" name="KnowWay" value="5">亲朋好友
</label>
.checkbox-inline{
height:40px;
overflow: hidden;
}
input[type=checkbox] {
cursor: pointer;
position: relative;
top: -50px;
}
input[type=checkbox]::after {
content: ' ';
position: absolute;
top: 40px;
background-color: #fff;
color: #fff;
width: 14px;
height: 14px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
border-radius: 2px;
box-sizing: border-box;
border: 1px solid #ddd;
}
input[type=checkbox]:checked::after {
content: "";
background-color: red;
border-color: red;
background-color: red;
}
input[type=checkbox]:checked::before {
content: '';
position: absolute;
top: 41px;
left: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
z-index: 1;
}