Html 如何在纯css中创建自定义复选框和单选按钮?
我试图使一个自定义复选框和单选按钮在纯css与跨浏览器兼容 我看到的结果如下图所示:-Html 如何在纯css中创建自定义复选框和单选按钮?,html,css,checkbox,radio-button,Html,Css,Checkbox,Radio Button,我试图使一个自定义复选框和单选按钮在纯css与跨浏览器兼容 我看到的结果如下图所示:- 我想用ie7实现这一唯一的纯css我已经创建了基于css的复选框和单选按钮,结果是否接近 试试这个: HTML <div class="checkbox"> <label class="i-checks"> <input type="checkbox" value=""> <i></i> Option one </labe
我想用ie7实现这一唯一的纯css我已经创建了基于css的复选框和单选按钮,结果是否接近 试试这个: HTML
<div class="checkbox">
<label class="i-checks">
<input type="checkbox" value=""> <i></i> Option one
</label>
</div>
<div class="radio">
<label class="i-checks">
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked
</label>
</div>
或者-遵循此URL:据我所知,仅使用CSS是不可能的。但我可能错了!除非你是这篇文章的作者,我不知道怎么称呼你Arora先生@艾敏,你很接近,但不是在现场。查看使用的图像:背景图像:url();
.i-checks {
padding-left: 20px;
cursor: pointer;
}
.i-checks input {
opacity: 0;
position: absolute;
margin-left: -20px;
}
.i-checks input:checked + i {
border-color: #23b7e5;
}
.i-checks input:checked + i:before {
left: 4px;
top: 4px;
width: 10px;
height: 10px;
background-color: #23b7e5;
}
.i-checks input:checked + span .active {
display: inherit;
}
.i-checks input[type="radio"] + i, .i-checks input[type="radio"] + i:before {
border-radius: 50%;
}
.i-checks input[disabled] + i, fieldset[disabled] .i-checks input + i {
border-color: #dee5e7;
}
.i-checks input[disabled] + i:before, fieldset[disabled] .i-checks input + i:before {
background-color: #dee5e7;
}
.i-checks > i {
width: 20px;
height: 20px;
line-height: 1;
border: 1px solid #cfdadd;
background-color: #fff;
margin-left: -20px;
margin-top: -2px;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
position: relative;
}
.i-checks > i:before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 0px;
height: 0px;
background-color: transparent;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.i-checks > span {
margin-left: -20px;
}
.i-checks > span .active {
display: none;
}