ラジオボタンの高さを上げるとMozillaブラウザで問題が発生する

Question

ラジオボタンのサイズを大きくする必要があります。 Mozilla Firefoxを除く他のすべてのブラウザで正常に動作しています。ラジオボタンがぼやけています。

私は-moz-appearance: none; CSSプロパティを追加してスタイルを変更しようとしました。次の結果を返しています

アウターラインのコントロールを取得できません。この問題を解決する方法はありますか？ Linkシオマネキを作成し

私はMozillaの47.0.0に

Answer 1

を使用しています（モジラでそれを確認してください）あなたはどのブラウザでどの作業以下のように純粋なCSSを使用して、ラジオボタン（やチェックボックス）をカスタマイズすることができます。あなたのUXごとにカスタマイズすることができます。ラジオボタンのスタイルが異なる場合は、擬似要素の代わりに背景イメージ（ラベル用）スタイリングに進むことができます。

id-forを組み合わせてラジオとラベルをグループ化することを忘れないでください。私のマシン上で

input[type="radio"]{ 
 
    display:none; 
 
} 
 
input[type="radio"]+label{ 
 
    position:relative; 
 
    margin-right:10px; 
 
} 
 
input[type="radio"]+label::before{ 
 
    content:''; 
 
    display:inline-block; 
 
    width:14px; 
 
    height:14px; 
 
    vertical-align:middle; 
 
    border:1px solid #545454; 
 
    border-radius:100%; 
 
    margin-right:4px; 
 
} 
 
input[type="radio"]:checked +label::after{ 
 
    content:''; 
 
    position:absolute; 
 
    width:10px; 
 
    height:10px; 
 
    background:#545454; 
 
    border-radius:100%; 
 
    left:3px; 
 
    top:5px; 
 
}

<input type="radio" name="radio-set" id="radio1"/> 
 
<label for="radio1">Option 1</label> 
 
<input type="radio" name="radio-set" id="radio2"/> 
 
<label for="radio2">Option 2</label>