單選按鈕在Chrome中顯示不需要的白色背景。 Firefox很好

在谷歌瀏覽器中，單選按鈕在圓圈周圍顯示不需要的白色背景。這在Firefox中並未按預期顯示。單選按鈕在Chrome中顯示不需要的白色背景。 Firefox很好

請檢查這些圖片。 enter image description here

而且她是有問題的網頁的直接鏈接（在Firefox和Chrome檢查） https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

，我可以申請Chrome的CSS技巧？

2012-08-28 Nilesh

http://stackoverflow.com/questions/9838583/radio-button-background-goes-white-in-windows-chrome-when-using-webkit-backface – calsign

我看到了這個問題，但沒有解決方案 – Nilesh

我在Chrome中看不到背景問題 - 是否解決了問題？ – zenkaty

這是一個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; 
}

Radiobuttons with sprite

你可以用無線電對接創建你自己的精靈在你想要的設計上... ...

希望有所幫助，如果你有任何問題，請告訴我。

-Hannes

來源

2013-03-15 05:50:36

哦，如果你想只用於Chrome瀏覽器，這篇文章似乎很有幫助：http://stackoverflow.com/questions/2447511/can-you-target-google-chrome-yes-you-can –

包裹在一個div無線電元件，以及div的溢出設置爲隱藏，並且邊界半徑爲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; 
}

來源

2013-08-07 17:11:40 Devin

我知道這是一個古老的線程，但我有這個同樣的問題，我花了一段時間來看着辦吧所以我發佈這個如果別人有同樣的問題。我真的很意外地發現它。我正在尋找其他東西，並使用Ctrl和滾動放大頁面，並看到單選按鈕沒有白色背景了（看起來更好）。所以我只是把：

zoom: 0.999;

在正確的css類，併爲我修復它。

來源

2014-01-08 09:38:47 user2011403

單選按鈕在Chrome中顯示不需要的白色背景。 Firefox很好

回答

相關問題