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" >

这里也是小提琴： 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/

CSS -moz-apperarence不适用于单选按钮

1 个答案: