При реализации простого переключателя я столкнулся с проблемой, которая, кажется, появляется только в Safari. Один и тот же код отлично работает в Firefox и Chrome.
.mgs.huge {
font-size: 36pt;
}
input.mgs.toggle {
display: none;
}
label.mgs.toggle {
display: flex;
flex-direction: row;
align-items: center;
width: max-content;
position: relative;
--toggle-color: 49, 112, 212;
}
/* The toggle background. */
label.mgs.toggle::before {
display: inline-block;
content: "";
height: 12px;
width: 23px;
border: 1px solid rgba(var(--toggle-color), 1);
background-color: rgba(var(--toggle-color), 0.75);
border-radius: 25pt;
margin-right: 4px;
}
label.mgs.toggle.huge::before {
height: 35px;
width: 69px;
}
/* The circle (handle) in the toggle - unchecked, standard size. */
label.mgs.toggle::after {
flex: 0 0 auto;
align-self: center;
content: "";
position: absolute;
width: 12px;
height: 12px;
left: 1px;
background-color: white;
border-radius: 50%;
transition: left 0.2s;
}
label.mgs.toggle.huge::after {
width: 35px;
height: 35px;
}
input:checked.mgs.toggle.huge + label::after {
left: 35px;
}
<input type="checkbox" class="mgs toggle huge" readonly="" id="toggle6" value="">
<label for="toggle6" class="mgs toggle huge">Huge</label>
В Safari белая ручка не выравнивается по вертикали. Указав верхнее значение, вы можете выровнять его вручную (в данном случае, добавив 11px top к label.mgs.toggle.huge::after), но, к сожалению, это показывает другую проблему: Firefox не использует такое же вертикальное смещение, как Chrome, а Safari делает: круг слегка смещен на половину пикселя или около того.
Следовательно, я бы предпочел решение, в котором Safari выполняет автоматическое c вертикальное центрирование, как это предполагается в этой схеме flex-box.
Здесь также можно поиграть со скрипкой: https://jsfiddle.net/3Ltkwaux/.