Вимкніть округлення вхідних елементів iPhone / Safari

374

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

Чи є спосіб доручити Safari (за допомогою CSS або метаданих) не округляти поля введення та робити їх прямокутними за призначенням?

— Олексій
джерело

1

Цікаво, чому НЕТ CSS скидання, схоже, містить це супер просте правило CSS. Це розум.

— Тоскан

1

Я фактично створив скидання CSS на основі скидання css 2 eric meyer з доданим необхідним css, який ви знайдете у відповіді тут. Він доступний на сайті github: github.com/Jossnaz/JossiCssReset

— Тоскан

1

Будьте обережні -webkit-appearance: none;, я думаю, що краще обмежити цю умову сферою дії конкретного вхідного елемента. В іншому випадку він може приховати елементи введення радіо, якщо вони є на сторінці.

— ква

659

На iOS 5 та новіших версіях good ol ' border-radiusвиконує трюк:

input {
    border-radius: 0;
}

Якщо необхідно видалити тільки закруглені кути на прошивкою або інакше з якої - то причини не може нормалізують закруглені кути на різних платформах використовуйте префиксально -webkit-border-radiusвластивість замість, який по - , як і раніше підтримується. Звичайно, зауважте, що Apple може вирішити припинити підтримку префіксованого ресурсу в будь-який час, але, враховуючи інші їх особливості, пов'язані з платформою CSS, ці шанси, що вони збережуть його.

У застарілих версіях вам довелося встановити -webkit-appearance: noneзамість цього:

input {
    -webkit-appearance: none;
}

— BoltClock
джерело

1

Що стосується iOS 5, це видалить лише внутрішню тінь. Перевірте відповідь Піюша, щоб також видалити закруглені кути.

— Джонатан Фріланд

6

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

— Rudie

13

"Якщо IOS хоче закруглені куточки та тіні, нехай користувачі IOS мають їх": Це абсолютно неприйнятно в моїй ситуації, і, мабуть, і в більшості інших.

— coredumperror

2

!! Ви не повинні використовувати цей метод. Це робить прапорець, здається, недоступним. Через це багато користувачів мого сайту не приймають платіжну угоду. !!

— синтрезин

10

Бо <input type="search">для iOS 10 мені все ще потрібно -webkit-appearance: none;.

— Габріель Смоляр

54

input -webkit-appearance: none; поодинці не працює.

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

— юстадев
джерело

1

Мені потрібно було додати -webkit-border-radiusатрибут, щоб <input type="text">видалити закруглені кути в iOS 5.

— Jonathan Freeland

Не потрібно додавати 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
}

— Йоханск
джерело

14

Лише зауважте, що @include border-radius(0);міксин доступний лише у тому випадку, якщо ви його визначили самостійно або використовуєте рамку Compass, а не лише ванільну SASS.

— waffl

Лише зауваження, якщо ви використовуєте SCSS, ви, ймовірно, також можете використовувати автопрефіксатор.

— Крістіан

6

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

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

Робити -webkit-border-radius: 0;поодинці не зрозуміла рідна укладка. Це було також для перегляду в Інтернеті на вбудованому додатку.

— Кріс Бернарді
джерело

4

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

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; }

— Генрік N
джерело

4

Спробуйте це:

Спробуйте додати inputCss так:

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

— Івін Радж
джерело

3

Я використовував простий радіус кордону: 0; щоб видалити закруглені кути для типів введення тексту.

— Джессі
джерело

0

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

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

— CpnCrunch
джерело