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

Question

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

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

Answer 1

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

input {
    border-radius: 0;
}

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

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

input {
    -webkit-appearance: none;
}

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

Answer 5

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

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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

Answer 10

Примерьте вот это:

Попробуйте добавить input Css, как это:

 -webkit-appearance: none;
       border-radius: 0;

Answer 11

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

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf