CSS надіслати кнопку дивного відображення на iPad / iPhone

222

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

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

— Франческо
джерело

можливий дублікат стилю css для кнопок введення на ipad / iphone

— skolima

Відповіді:

453

ой! я просто знайшов себе: просто додайте цей рядок до будь-якого потрібного вам елемента

   -webkit-appearance: none;

— Франческо
джерело

я люблю тебе, 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;
}

Це допоможе.

— субінди вечора
джерело

Чудово! Кнопка надсилання форми тепер виглядає так, як повинна бути на моєму iPad

— peterkodermac

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

— subindas pm

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

-webkit-appearance:none;
opactiy: 1

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

— Приянк Таккар
джерело