iOS сили закруглені кути і відблиски на входах

94

Пристрої iOS додають багато дратівливих стилів на введення форми, особливо на введення [type = submit]. Нижче наведені ті самі прості форми пошуку в браузері настільного комп’ютера та iPad.

Настільний:

Робочий стіл

iPad:

iPad

Введення [type = text] використовує вставку тіні вікна CSS, і я навіть вказав -webkit-border-radius: none; який, мабуть, перекривається. Колір і форма кнопки мого вводу [type = submit] на iPad повністю згине. Хтось знає, що я можу зробити, щоб виправити це? Заздалегідь спасибі.

css ios forms

— інорганік
джерело

4

-webkit-поява: немає; Допомагає усунути більшість проблем, але все одно не усуває зазор між двома елементами або закруглені кути. Тож будь-яка допомога щодо цього буде вдячна. Дякую.

— inorganik

2

Ви вказали, -webkit-border-radius:none;чи вказали ви border-radius:none;?

— Rigel Glen

7

Вказавши -webkit-appearance:noneта -webkit-border-radius:0зробив для мене трюк на iOS!

— Primus202

183

Версія, яку я працював, це:

input {
    -webkit-appearance: none;
}

У деяких версіях браузера webkit, можливо, ви також зіткнетесь з тим, що border-radiusвсе ще існує. Скидання за допомогою наступного:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Це може бути розширено , щоб застосувати до всіх WebKit стилі formкомпонентів , таких як input, select, buttonабо textarea.

Посилаючись на вихідне запитання, ви не використовуєте значення 'none' при очищенні будь-якого елемента css на основі одиниць. Також пам’ятайте, що це приховує прапорці в Chrome, тому, можливо, використовуйте щось на зразок input[type=text]або input[type=submit], input[type=text](зауважте, що input:not([type=checkbox]), input:not([type=radio])це стосуватиметься всіх типів введення, оскільки кожен ввід задовольняє будь-якій із цих двох умов).

— марксизм
джерело

5

-webkit-поява: немає; Приховує прапорці в Chrome - недійсне рішення!

— Ніко Вестердейл

2

-webkit-поява: немає; робить трюк! (-webkit-border-radius не потрібен)

— OZZIE

Хороший момент - все-таки залежить від версії браузера, яку я знайшов, тож якраз там є помилка. Я відредагую публікацію для актуальності.

— marksyzm

3

input: not ([type = "checkbox"]) буде кращим способом уникнути проблеми в Chrome? Хоча це не буде працювати в IE <= 8, але знову ж таки, це не те, що ви намагаєтеся виправити.

— Робін Френч

Використання input:not([type=checkbox]), input:not([type=radio])означає, що стиль застосовується до всіх кнопок Safari, оскільки кожна кнопка відповідає одній із цих двох умов. Натомість я використав input[type=submit], input[type=text].

— мігельморін

17

За допомогою цього ви можете позбутися ще кількох стилів форми, введення тощо.

input, textarea, select {
   -webkit-appearance: none;
}

— нік
джерело

Це все одно потрібно border-radius: 0;буде повністю скинути, і не потрібно радіус кордону. Ще тільки встановив border-radius.

— Рефілон

3

Для кнопки надсилання не використовуйте:

<input type="submit" class="yourstylehere" value="submit" />

Замість цього використовуйте тег кнопок:

<button type="submit" class="yourstylehere">Submit</button>

Це працювало для мене.

— Цифровий робот Gorilla
джерело

1

FWIW, у мене щойно виникала ця проблема в проекті, і iPad 1, на якому я тестував, також додав стилі до <button>тегів. Тому я думаю, що вам краще вирішити це безпосередньо за допомогою CSS.

— neemzy

1

є погляд на normalization.css

Є демонстрація, де ви можете протестувати елементи форми і подивитися, як вони виглядають в ios. Є кілька властивостей, орієнтованих на веб-кайти.

— Rdpi
джерело

1

Це те, що я використовую у своїх проектах

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

— Вакар Аламгір
джерело

0

Ви також отримуєте цю проблему в деяких браузерах, якщо у вас є таке:

<a class="btn btn-primary" href="#" type="button">Link</a>

замість:

<a class="btn btn-primary" href="#" role="button">Link</a>

Це може статися, якщо ви зміните вхідний елемент на anker і забудете змінити typeна role.

У мене ця проблема була в Chrome і Safari на моєму IPad.

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