html – 自定义CSS3复选框在Firefox或IE上不起作用

概述小提琴： http://jsfiddle.net/V98W8/ 我有一个自定义复选框,在Chrome中看起来很完美,但在Firefox或IE浏览器中显示完全破坏了. 我已经尝试添加自定义前缀和一切,但它似乎没有解决问题. #milestone-table input[type="checkbox"] { -webkit-appearance: none; -moz-appear 小提琴： http://jsfiddle.net/V98W8/

我有一个自定义复选框,在Chrome中看起来很完美,但在firefox或IE浏览器中显示完全破坏了.

我已经尝试添加自定义前缀和一切,但它似乎没有解决问题.

#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,padding .25s;    -o-Transition: border .25s .15s,padding .25s;    -ms-Transition: border .25s .15s,padding .25s;    Transition: border .25s .15s,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.025),0 1px 4px rgba(0,0.15),0 4px 4px rgba(0,0.1);    Box-shadow: inset 0 -3px 3px rgba(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,right .15s .175s;    -o-Transition: border .25s .15s,right .15s .175s;    -ms-Transition: border .25s .15s,right .15s .175s;    Transition: border .25s .15s,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,padding .25s .15s;    -o-Transition: border .25s,padding .25s .15s;    -ms-Transition: border .25s,padding .25s .15s;    Transition: border .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,right .25s .175s;    -o-Transition: border .25s,right .25s .175s;    -ms-Transition: border .25s,right .25s .175s;    Transition: border .25s,right .25s .175s;}

解决方法 可悲的是,据我所知,这是firefox中的一个老版本,尚未修复.如果它们最近没有改变(从你的问题来看,它们没有改变),无论你做什么,样式复选框和单选按钮在firefox中都无法正常工作.

通常,解决此问题的常用方法是简单地使用常规div并让它们通过JavaScript或类似方法切换隐藏字段.绝对不是一个漂亮的解决方案,但在他们修复这个BUG之前,你无能为力.

我制作了a quick example,它使用了一个隐藏的复选框,标签实现了至少有效的功能.当然,它不仅仅是使用常规输入标签,但它应该在firefox中工作(我猜IE,但我还没有测试).

<div ID="milestone-table">    <p>CheckBox</p>    <label>        <input type="checkBox"/>        <label />    </label></div>

总结

以上是内存溢出为你收集整理的html – 自定义CSS3复选框在Firefox或IE上不起作用全部内容，希望文章能够帮你解决html – 自定义CSS3复选框在Firefox或IE上不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。