Остановить 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, у тебя могут просто проблемы с приоритетом ...?

— Фрэнк Нок

13

Вы можете попробовать использовать следующий CSS:

-webkit-appearance:none;

Подробнее: http://trentwalton.com/2010/07/14/css-webkit-appearance/

— Дхукка
источник

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