Кнопки "Радио" отображают нежелательный белый фон в Chrome. Firefox отлично

В Google Chrome радиокнопки отображают нежелательный белый фон вокруг круга. Это не показано в Firefox, как предполагалось.

Пожалуйста, проверьте эти изображения. enter image description here

И это прямая ссылка страницы с проблемой (проверьте в Firefox и Chrome) https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4

Какие-либо трюки CSS, которые я могу применить для Chrome?

ОТВЕТЫ

Ответ 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;
}

Radiobuttons with sprite

Вы можете создать свой собственный спрайт с помощью переключателей в желаемом дизайне...

Надеюсь, что это поможет, если у вас есть еще вопросы, сообщите мне.

-Hannes

Ответ 2

Оберните радиоэлемент в 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;
}

Ответ 3

Я знаю, что это старый поток, но у меня была такая же проблема, и мне потребовалось некоторое время, чтобы понять это, поэтому я публикую это, если у кого-то другая проблема. Я понял это довольно случайно. Я смотрел на что-то еще и увеличивал масштаб страницы, используя ctrl и прокрутку, и видел, что у этого переключателя больше нет белого фона (и он выглядел лучше). Поэтому я просто положил:

zoom: 0.999;

в правом классе css и это исправило это для меня.