Остановить 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 05
Если вы не примените -webkit-appearance: none, тогда Safari станет придирчивым к свойствам, которые могут быть применены к нему (а именно, font-sizeи color. Лучшим решением будет применение обоих.
methodofaction 05
Сообщение, подтверждающее, что это решение работает на iPad, iOS 5.1.1.
Dominor Novus
6
отвечая на комментарий 2-летней давности .... да ладно. -webkit-appearance: нет; заставляет флажки не отображаться в Chrome. Возможно, влияет и на другие элементы и браузеры.
matthew_360 09
ВАУ!!! Мы часами искали, чтобы исправить это в приложении Cordova, и это было решение! Я не могу проголосовать за это достаточно !!!
Джей Динс
18

У меня не сработало, -webkit-appearance: none.

Это делает:

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

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

Роэл
источник
1
Подтверждение: ответ, получивший наибольшее количество голосов (от Duopixel), не работает, но ответ Роэла работает. Вероятно, это связано с изменениями, внесенными в реализацию мобильного веб-набора Apple за прошедшие месяцы.
coredumperror 05
@CoreDumpError - Вы имеете в виду, что это не работает для вас . Решение у меня сработало - я только что его реализовал. Не знаю, почему у нас разные результаты. Опять же, ваш пост был сделан более полугода назад, поэтому я не могу сказать, испытываете ли вы все еще ту же проблему.
Dominor Novus
@Roel, у тебя могут просто проблемы с приоритетом ...?
Фрэнк Нок
6

Я обнаружил, что на iPad 2 вы должны использовать следующее:

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

в вашем классе кнопок.

Даниэле Ф.
источник
3

У меня был сайт с вводом submit type = "image". Эта вариация вышеизложенного зафиксировала закругленные углы:

input[type=image] {
    -webkit-border-radius:0px;
}
RevConcept
источник
1

Я обнаружил, что эта настройка background: linear-gradient(color1, color2)избавляет от чрезмерно закругленных углов на устройствах Apple и работает во всех других браузерах / платформах, которые я пробовал.

маит
источник
Это исправило это для меня, и мне кажется, что это наименее вероятный вариант с непредвиденными побочными эффектами.
Вим Деблауве
1

Я решил, добавив код для типов «кнопка» и «отправить»:

   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
источник