Стилизация радиокнопок с box-shadow - тень квадратная для некоторых значений в Safari. - PullRequest
Новая
       274

Стилизация радиокнопок с box-shadow - тень квадратная для некоторых значений в Safari.

0 голосов
/ 07 августа 2020

Я пытаюсь стилизовать радиокнопки с css, и у меня довольно странная проблема с Safari. Вот фрагмент: 

*
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
    outline: none;
}

input[type="radio"]
{
    min-width: 1em;
    min-height: 1em;

    font-size: 100%;

    border: 1px solid #057;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 0;
    margin: 1px;
    background-color: #fff;

    transition: transform .05s linear;
}

input[type="radio"]:checked
{
    box-shadow: inset 0 0 0 .2rem #fff;
    background-color: #057;
    transition: transform .05s linear;
}
<div id="radiocontainer">
                <input type="radio" id="id_radio1" name="radio1" value="radio1" form-id="form1">
                <label for="id_radio1">Radio 1</label>
                <input type="radio" id="id_radio2" name="radio1" value="radio2" form-id="form1">
                <label for="id_radio2">Radio 2</label>
                <input type="radio" id="id_radio3" name="radio1" value="radio3" form-id="form1">
                <label for="id_radio3">Radio 3</label>
                <input type="radio" id="id_radio4" name="radio1" value="radio4" form-id="form1">
                <label for="id_radio4">Radio 4</label>
</div>

И вот результат, прямо из этого фрагмента:

Радио 1 и 3 выглядят так, как я хочу:

enter image description here

But radio 2 and 4 box-shadows are clipping(?) square:

введите описание изображения здесь

Что я делаю не так? Пожалуйста помоги. Спасибо.

...