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

376

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

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

— Alex
источник

1

Интересно, почему НЕТ CSS reset, кажется, содержит это супер простое правило CSS. Это мозговая смерть.

— Тоскан

1

Я на самом деле создал сброс CSS, основанный на сбросе css Эрика Мейера 2 с добавлением необходимого css, который вы найдете в ответе здесь. Он доступен на github: github.com/Jossnaz/JossiCssReset

— Toskan

1

Будьте осторожны с -webkit-appearance: none;, я думаю, лучше ограничить это условие областью действия конкретного элемента ввода. В противном случае он может скрывать элементы радиовхода, если они есть на странице.

— около

661

На iOS 5 и позже:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

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

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

input {
    -webkit-appearance: none;
}

— BoltClock
источник

1

Начиная с iOS 5, это только удалит внутреннюю тень. Проверьте ответ Пиюша, чтобы убрать закругленные углы.

— Джонатан Фриленд,

6

-webkit-appearanceна самом деле не имеет ничего общего с внутренней тенью и закругленными углами. Не используйте это только для этого. css-infos.net/property/-webkit-appearance

— Руди

14

«Если IOS хочет закругленные углы и тени, пусть они есть у пользователей IOS»: это совершенно неприемлемо в моей ситуации и, вероятно, в большинстве других.

— coredumperror

2

Вы не должны использовать этот метод, он делает флажок недоступным. Из-за этого многие пользователи моего сайта не принимают соглашение об оплате. !!

— синтирезин

11

Для <input type="search">на iOS 10 мне все еще нужно -webkit-appearance: none;.

— Габриэль Смоляр

55

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

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

— justadev
источник

1

Мне действительно нужно было добавить -webkit-border-radiusатрибут, чтобы <input type="text">убрать закругленные углы в iOS 5.

— Джонатан Фриленд,

Не нужно добавлять px после 0

— mintedsky

42

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

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

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

— KoemsieLy
источник

2

Я обнаружил, что использование, input[type]кажется, делает трюк для всех входов.

— JacobTheDev

11

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

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

— Франсуа Ромен
источник

7

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

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

— Johansrk
источник

14

Просто обратите внимание, что @include border-radius(0);миксин доступен, только если вы определили его сами или используете платформу Compass, а не просто vanilla SASS.

— вафля

Замечание: если вы используете SCSS, вам, вероятно, следует использовать и авторефиксер.

— Кристиан

6

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

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

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

— Крис Бернарди
источник

5

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

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

— seanjacob
источник

4

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

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

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

— Хенрик Н
источник

4

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

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

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

— Ивин Радж
источник

3

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

— Джесси
источник

0

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

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

— CpnCrunch
источник