html - CSS -moz-appearance 不适用于单选按钮

Question

我正在设计一些单选按钮的样式，但该样式不适用于 Mozilla Firefox

这是CSS

input[type="radio"] {
                    -webkit-appearance:none;
                    -moz-appearance:none;
                    appearance:none;
                    display:inline-block;
                    width:25px;
                    height:25px;

                    cursor:pointer;
                    outline:none;
                    border:2px solid rgba(169,168,164,0.8);

                }

                input[type="radio"]:checked {
                    border:2px solid black;

                    outline:none;

                }

这是输入我的单选按钮是:

<input type="radio" id="color" name="color" value="<?php echo $col_id;?>" style="background-color:red" >
<input type="radio" id="color" name="color" value="<?php echo $col_id;?>" style="background-color:blue" >

这也是 fiddle : http://jsfiddle.net/15eboqx8/1/

Answer 1

强烈建议不要像这样设置单选按钮/复选框的样式。

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

https://bugzilla.mozilla.org/show_bug.cgi?id=605985

看看使用 a label to visually mimic field ，因此实际上您隐藏了单选按钮，将标签设置为单选按钮样式，然后使用 :checked 伪选择器切换选中/未选中状态。

编辑:我已经使用我描述的方法重新创建了您的单选框。

JSFiddle: http://jsfiddle.net/eyq8bkz6/