css - Chrome でラジオ ボタンに望ましくない白い背景が表示される。ファイアフォックスはいいぞ

Question

Google Chrome では、ラジオ ボタンの円の周りに望ましくない白い背景が表示されます。これは、Firefox では意図したとおりに表示されません。

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

そして、彼女は問題のあるページの直接リンクです (Firefox と Chrome で確認してください) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

Chrome に適用できる CSS トリックはありますか?

Answer 1

これはChromeの既知のバグであり、実際の回避策はありません。

この時点で私が見て使用している唯一のオプションは、チェックボックスの画像を含むスプライトシートを使用することです。私はインターネットで見つけたランダムなスプライトでそれをあなたに見せるためにフィドルを作りました：

回避策

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;
}

希望のデザインのラジオボタンを使用して、独自のスプライトを作成できます...

ご不明な点がございましたら、お気軽にお問い合わせください。

-ハンネス

Answer 2

radio 要素を div でラップし、その div のオーバーフローを非表示に設定し、border-radius を 100px に設定します。次に、無線入力を表示ブロックに設定し、マージンを設定しません。これは私のために働いた：

マークアップ:

<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;
}