CSS кнопка отправки странного рендеринга на iPad / iPhone

222

Я заметил, что если я стилизую свои кнопки с помощью CSS, используя радиус, цвета и границы, они выглядят хорошо, но в iphone / ipad / ipod они выглядят ужасно ... не должен быть такой же рендеринг, как в Safari Desktop ??

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

Francesco
источник
1
Возможный дубликат CSS-стиля для кнопок ввода на ipad / iphone
Сколима

Ответы:

453

упс! только что нашел себя: просто добавьте эту строку на любой элемент, который вам нужен

   -webkit-appearance: none;
Francesco
источник
23
я люблю тебя, stackoverflow и @Francesco
jahrichie
28
Блестящий, и вот отличная статья об уловках CSS. В нем перечислены все другие элементы, измененные WebKit и Mozilla.
Патрик
У Compass есть миксин и для этого. Compass-style.org/reference/compass/css3/appearance
Патрик Бисон
1
Я хотел бы сделать этот поиск Google 12 часов назад ... СПАСИБО.
Элли Пост
1
Действительно здорово! Мы не думали, что такая проблема возникла у нас в iOS! Еще раз большое спасибо за это!
Саурабх Праджапати
36

Добавьте этот код в файл CSS:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Это поможет.

Subindas вечера
источник
1
Большой! Кнопка отправки формы теперь выглядит так, как и должна быть на моем iPad
peterkodermac
1
@peterkodermac, пожалуйста, не забудьте добавить родительский класс CSS, иначе это может повлиять на каждое поле ввода.
Subindas вечера
4

Вышеприведенный ответ о появлении webkit сделал свое дело, но кнопка все равно выглядела бледно / скучно по сравнению с браузером на других устройствах / десктопах. Я также должен был установить непрозрачность на полную (в диапазоне от 0 до 1)

-webkit-appearance:none;
opactiy: 1

После установки прозрачности кнопка выглядела одинаково на всех различных устройствах / эмуляторе / рабочем столе.

Приянк Тхаккар
источник