Отключение округления элементов ввода iPhone/Safari

Мой сайт хорошо отражается на браузере iPhone/Safari, за одним исключением: поля ввода текста имеют странный округлый стиль, который не выглядит хорошо с остальной частью моего веб-сайта.

Есть ли способ проинструктировать Safari (через CSS или метаданные), чтобы не округлить поля ввода и не сделать их прямоугольными, как предполагалось?

310
задан Alex 27 мая '10 в 8:38
источник поделиться
11 ответов

В iOS 5 и более поздних версиях good ol border-radius делает трюк:

input {
    border-radius: 0;
}

Если вы должны удалить только закругленные углы на iOS или иначе по какой-то причине не можете нормализовать закругленные углы между платформами, вместо этого используйте префиксное свойство -webkit-border-radius, которое по-прежнему поддерживается. Конечно, обратите внимание, что Apple может в любой момент отказаться от поддержки префиксного свойства, но, учитывая их другие особенности CSS, связанные с платформой, вероятность того, что они сохранят ее.

В старых версиях вам вместо этого нужно было установить -webkit-appearance: none:

input {
    -webkit-appearance: none;
}
555
ответ дан BoltClock 27 мая '10 в 8:39
источник поделиться

input -webkit-appearance: none; не работает.

Попробуйте добавить -webkit-border-radius:0px;.

42
ответ дан justadev 22 янв. '11 в 13:50
источник поделиться

Это лучший способ удалить округленные в IOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Примечание: Пожалуйста, не используйте этот код для опции выбора. У нашей проблемы будет проблема.

31
ответ дан KoemsieLy 21 янв. '14 в 5:32
источник поделиться

Принятый ответ запустит переключатель в Chrome. Это работает:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
8
ответ дан francoisromain 16 марта '16 в 20:52
источник поделиться

Вот полное решение для Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
7
ответ дан Johansrk 08 нояб. '12 в 13:54
источник поделиться

Для меня на iOS 5.1.1 на iPhone 3GS мне пришлось очистить стиль поля поиска и установить его в стиле, предназначенном для

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Выполнение -webkit-border-radius: 0; самостоятельно не очистило родной стиль. Это было также для веб-просмотра в родном приложении.

4
ответ дан Chris Bernardi 23 авг. '12 в 19:59
источник поделиться

У меня была такая же проблема, но только для кнопки отправки. Необходимо удалить внутреннюю тень и закругленные углы -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
4
ответ дан seanjacob 05 сент. '12 в 19:55
источник поделиться

Если вы используете normalize.css, эта таблица стилей сделает что-то вроде input[type="search"] { -webkit-appearance: textfield; }.

Это имеет более высокую специфичность, чем один селектор классов, например .foo, поэтому имейте в виду, что вы не можете сделать только .my-field { -webkit-appearance: none; }. Если у вас нет лучшего способа добиться правильной специфики, это поможет:

.my-field { -webkit-appearance: none !important; }

3
ответ дан Henrik N 09 февр. '15 в 14:04
источник поделиться

Я использовал простой border-radius: 0; для удаления закругленных углов для типов ввода текста.

3
ответ дан Jesse 12 окт. '12 в 4:15
источник поделиться

Чтобы правильно отображать кнопки в Safari и других браузерах, вам нужно указать определенный стиль для кнопок в дополнение к настройке появления веб-кавычка на none, например:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
0
ответ дан CpnCrunch 15 авг. '17 в 23:51
источник поделиться

Пожалуйста, попробуйте следующее:

Попробуйте добавить input Css следующим образом:

 -webkit-appearance: none;
       border-radius: 0;
0
ответ дан Ivin Raj 18 сент. '15 в 8:40
источник поделиться

Другие вопросы по меткам