ラジオボタンは、Chromeで不要な白い背景を表示します。 Firefoxは大丈夫です

Question

Google Chromeでは、ラジオボタンがサークルの周りに不要な白い背景を表示します。これは意図した通りFirefoxには表示されません。

これらの画像を確認してください。

そして彼女は https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

私はクロームを申請することができます任意のCSSのトリック（FirefoxとChromeで確認してください）問題を持つページの直接リンクですか？

Answer 1

これはknownです。実際の回避策がないChromeのバグです。

この時点で表示して使用する唯一のオプションは、チェックボックスの画像を含むスプライトシートを使用することです。

Workaround

HTML：：

<div id="show"> 
    <input type="radio" id="r1" name="rr" /> 
    <label for="r1"><span></span>Radio Button 1</label> 
<p /> 
    <input type="radio" id="r2" name="rr" /> 
    <label for="r2"><span></span>Radio Button 2</label> 
</div> 

CSS：

div#show { 
    width:100%; 
    height: 100%; 
    background:black; 
    margin: 10px; 
    padding: 10px; 
} 

input[type="radio"] { 
    /* Uncomment this to only see the working radio button */ 
    /* display:none; */ 
} 

input[type="radio"] + label { 
    color:#f2f2f2; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat; 
    cursor:pointer; 
} 

input[type="radio"]:checked + label span { 
    background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat; 
} 

私は、インターネットにあるいくつかのランダムなスプライトとのあなたにそれを表示するためにバイオリンを作りました

あなたはラジオバットで独自のスプライトを作成することができますあなたの希望するデザインのオン...

ご質問がある場合は、私に教えてください。

-Hannes

Answer 2

ラップDIVにおける無線要素、及び100ピクセルにそのDIVの隠さにオーバーフロー、及び境界半径を設定します。次に、ラジオ入力を表示ブロックに設定し、マージンを設定しないでください。これが私の仕事：

マークアップ：

<div class="radio_contain"> 
    <input type="radio" id="r1" name="r1"> 
</div> 

CSS：

.radio_contain { 
    display: inline-block; 
    border-radius: 100px; 
    overflow: hidden; 
    padding: 0; 
} 
.radio_contain input[type="radio"] { 
    display: block; 
    margin: 0; 
} 

Answer 3

私は、これは古いスレッドですけど、私はこの同じ問題を抱えていたし、それはそれを理解するために私にしばらく時間がかかりました他の人が同じ問題を抱えている場合は、私はこれを投稿しています。 私はそれを非常に間違いなく実際に考え出しました。私は何か他のものを見ていて、Ctrlキーとスクロールを使ってページを拡大して、ラジオボタンがもう白い背景を持たないことを確認しました。だから、私はちょうど入れた：

zoom: 0.999; 

右cssクラスでそれは私のためにそれを修正しました。