Не дозволяйте Safari Mobile надавати закругленим кутам кнопки введення

82

Я думаю, суб'єкт все це говорить. У мене є веб-додаток при перегляді на Iphone, Ipod або Ipad, кнопки подання вводу мають закруглені кути. Чи є спосіб зупинити це?

ios mobile-safari

— Новачок Флетчер
джерело

185

Якщо додати ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

Тоді ваші кнопки успадкують будь-які стилі CSS, які ви застосовували для інших браузерів.

— методофакція
джерело

1

Це не працює на iPad2, iOS 5.1.1. Однак я не можу бути впевненим, що він не буде працювати на інших пристроях iOAS, оскільки я не маю жодного для тестування. Однак -webkit-border-radius:0pxрішення Роеля справді працює.

— coredumperror

Якщо ви не застосуєте -webkit-izgled: none, тоді Safari вибагливий до властивостей, які можна застосувати до нього (а саме, font-sizeі color. Найкращим рішенням буде застосування обох.

— methodofaction

Повідомлення, щоб підтвердити, що це рішення працює для iPad, iOS 5.1.1.

— Домінор Новус

6

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

— matthew_360

ОГО!!! Ми шукали години, щоб виправити це в додатку Кордова, і це було рішення! Я не можу проголосувати цього достатньо !!!

— Jay Dinse

18

Мені не вдалося, зовнішній вигляд -webkit: none.

Це робить:

input[type=submit] {
    -webkit-border-radius:0px;
}

У мене була та ж проблема із закругленими кутами на кнопці із фоновим зображенням, просто на iPhone.

— Рол
джерело

1

Підтвердження: відповідь з найбільшою оцінкою тут (від Duopixel) не працює, але відповідь Роеля працює. Можливо, це пов’язано зі зміною, внесеною в мобільний веб-комплект Apple від Apple за ці місяці.

— coredumperror

@CoreDumpError - Ви маєте на увазі, що це не працює для вас . Рішення спрацювало для мене - я щойно його застосував. Не впевнені, чому ми маємо різні результати. Знову ж таки, ваша публікація була зроблена понад півроку тому, тому я не можу сказати, чи все ще ви стикаєтесь з тією ж проблемою.

— Домінор Новус

@Roel, у вас можуть бути просто проблеми з пріоритетом ...?

— Frank Nocke

13

Ви можете спробувати використовувати наступний CSS:

-webkit-appearance:none;

Більше інформації: http://trentwalton.com/2010/07/14/css-webkit-appearance/

— dthukka
джерело

6

Я виявив, що на iPad 2 ви повинні використовувати наступне:

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

у вашому класі кнопок.

— Даніеле Ф.
джерело

3

У мене був сайт із введеним типом submit = "image". Це відхилення вищезазначеного зафіксувало закруглені кути:

input[type=image] {
    -webkit-border-radius:0px;
}

— RevConcept
джерело

1

Я виявив, що налаштування background: linear-gradient(color1, color2)позбавляє надто закруглених кутів на пристроях Apple і працює на всіх інших браузерах / платформах, які я пробував.

— mait
джерело

Це виправило це для мене, і мені здається найменш ймовірним варіантом виникнення небажаних побічних ефектів.

— Вім Деблауве,

1

Я вирішив, додавши код для типів "button" і "submit":

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

— AGalvis
джерело