1

Есть форма, в которой имеются радио кнопки. Эти радио кнопки на мобильном сафари отображаются как чекбоксы (а выбранные радио кнопки отображаются как маленькие и не выбранные) (см. скриншот).

Единственное, что нашёл в интернете это свойство -webkit-appearance: radio, но оно никак не помогло

Как я понял, сам сафари переопределяет стили этих кнопок на свои, вопрос в том как их отключить или переопределить на нормальные?

UPD: пример кнопки

<input type="radio" name="customer" value="1" checked="checked">

Стилей почти никакх нет, кроме высоты/ширины и позиционирования Safari checkbox

3
  • Может это поможет -webkit-appearance: none;
    – soledar10
    10 фев 2017 в 12:46
  • Так кнопки просто пропадают 10 фев 2017 в 12:49
  • добавьте код кнопок в вопрос. 10 фев 2017 в 12:58

1 ответ 1

0

Сперва нужно обнулит стили:

input, textarea, button {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    resize: none;
}

А после мы задаем новые:

input[type="radio"]{
    -webkit-appearance: radio;
}
3
  • зачем обнулять textarea и button? 11 фев 2017 в 6:52
  • @SashaOmelchenko чтобы каждый раз не обнулять при написании кнопкок и полей. Но это женский вариант. Правильней будет не все input обнулять. Посмотрите, как мы делали здесь github.com/1000tech/godlike.css 11 фев 2017 в 9:30
  • я имею в виду, что textarea и button не имеют отношения к input[type="radio"], о котором спрашивают, зачем тогда их обнулять в данном конкретном сниппете кода? во-вторых, зачем вначале обнулять радиокнопку при помощи -webkit-appearance: none, а потом задавать ей -webkit-appearance: radio? почему не сразу задать ей определение? 11 фев 2017 в 10:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.