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

222

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

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

— Francesco
источник

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

— Сколима

Ответы:

453

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

   -webkit-appearance: none;

— Francesco
источник

я люблю тебя, stackoverflow и @Francesco

— jahrichie

Блестящий, и вот отличная статья об уловках CSS. В нем перечислены все другие элементы, измененные WebKit и Mozilla.

— Патрик

У Compass есть миксин и для этого. Compass-style.org/reference/compass/css3/appearance

— Патрик Бисон

Я хотел бы сделать этот поиск Google 12 часов назад ... СПАСИБО.

— Элли Пост

Действительно здорово! Мы не думали, что такая проблема возникла у нас в iOS! Еще раз большое спасибо за это!

— Саурабх Праджапати

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

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

Это поможет.

— Subindas вечера
источник

Большой! Кнопка отправки формы теперь выглядит так, как и должна быть на моем iPad

— peterkodermac

@peterkodermac, пожалуйста, не забудьте добавить родительский класс CSS, иначе это может повлиять на каждое поле ввода.

— Subindas вечера

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

-webkit-appearance:none;
opactiy: 1

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

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