Html 自定义CSS3复选框不';不能在Firefox或IE上工作
小提琴: 我有一个自定义的复选框,它在Chrome中看起来和工作都很完美,但在Firefox或IE中却完全被破坏了 我尝试过添加自定义前缀和所有东西,但似乎无法解决问题Html 自定义CSS3复选框不';不能在Firefox或IE上工作,html,css,Html,Css,小提琴: 我有一个自定义的复选框,它在Chrome中看起来和工作都很完美,但在Firefox或IE中却完全被破坏了 我尝试过添加自定义前缀和所有东西,但似乎无法解决问题 #milestone-table input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fafafa; border:
#milestone-table input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fafafa;
border: 1px solid lightgrey;
border-radius: 26px;
-webkit-box-shadow: inset 0 0 0 1px lightgrey;
box-shadow: inset 0 0 0 1px lightgrey;
cursor: pointer;
height: 28px;
position: relative;
-webkit-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
-moz-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
-o-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
-ms-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
width: 54px;
vertical-align: top;
outline: none;
}
#milestone-table .controls input[type="checkbox"] {
margin-top: 10px;
}
#add-milestone {
position: relative;
top: 7px;
left: 90%;
}
#milestone-table {
margin-top: -20px;
}
#milestone-table input[type="checkbox"]:after {
background-color: white;
border: 1px solid lightgrey;
border-radius: 24px;
-webkit-box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1);
content: '';
display: block;
height: 24px;
left: 0;
position: absolute;
right: 26px;
top: 0;
-webkit-transition: border .25s .15s, left .25s .1s, right .15s .175s;
-moz-transition: border .25s .15s, left .25s .1s, right .15s .175s;
-o-transition: border .25s .15s, left .25s .1s, right .15s .175s;
-ms-transition: border .25s .15s, left .25s .1s, right .15s .175s;
transition: border .25s .15s, left .25s .1s, right .15s .175s;
}
#milestone-table input[type="checkbox"]:checked {
border-color: #53d76a;
-webkit-box-shadow: inset 0 0 0 13px #53d76a;
box-shadow: inset 0 0 0 13px #53d76a;
padding-left: 18px;
-webkit-transition: border .25s, box-shadow .25s, padding .25s .15s;
-moz-transition: border .25s, box-shadow .25s, padding .25s .15s;
-o-transition: border .25s, box-shadow .25s, padding .25s .15s;
-ms-transition: border .25s, box-shadow .25s, padding .25s .15s;
transition: border .25s, box-shadow .25s, padding .25s .15s;
}
#milestone-table input[type="checkbox"]:checked:after {
border-color: #53d76a;
left: 26px;
right: 0;
-webkit-transition: border .25s, left .15s .25s, right .25s .175s;
-moz-transition: border .25s, left .15s .25s, right .25s .175s;
-o-transition: border .25s, left .15s .25s, right .25s .175s;
-ms-transition: border .25s, left .15s .25s, right .25s .175s;
transition: border .25s, left .15s .25s, right .25s .175s;
}
遗憾的是,这是Firefox中的一个老bug,据我所知还没有修复。如果他们最近没有改变这一点(从你的问题来看,他们没有),那么无论你做什么,在Firefox中设置复选框和单选按钮的样式都不能正常工作 通常,解决这个问题的一种常见方法是简单地使用常规div,并让它们通过javascript或类似工具切换隐藏字段。这绝对不是一个很好的解决方案,但是在他们修复这个bug之前,你无能为力 我使用一个隐藏的复选框和一个标签来实现一些至少有效的功能。当然,它并不像仅仅使用一个常规的输入标签那么漂亮,但它应该在Firefox中工作(我猜是IE,但我还没有测试过)
复选框
哪些版本的Firefox和IE?
<div id="milestone-table">
<p>Checkbox</p>
<label>
<input type="checkbox"/>
<label class="checkbox"/>
</label>
</div>