CSS -moz-apperarence не работает радио-кнопки

Question

Я стилизация некоторых кнопок радио, но стиль не работает для Mozilla Firefox

здесь есть устанавливаемый сотовый

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; 

       } 

и вот входы My кнопка радио:

<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 псевдо для переключения проверенные/непроверенные состояния.

EDIT: Я воссоздал ваши радиокамеры, используя описанный мной метод.

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