Стилизация кнопок ввода для iPad и iPhone

215

Я использую CSS для стилизации кнопок ввода на моем веб-сайте, но на устройствах IOS стиль заменяется кнопками Mac по умолчанию. Есть ли способ стилизации кнопок для iOS или способ сделать гиперссылку, которая ведет себя как кнопка отправки?

iphone css ios ipad mheavers
источник

Ответы:

526

Вы можете искать 

-webkit-appearance: none;
Джонас Г. Дрейндж
источник
Есть еще разница в нажатии кнопки: активный стиль, верно? Он игнорирует ваши стили и применяет полупрозрачный серый наложение?
Алан Х.
6
Если вы используете SCSS, используйте@include experimental(appearance, none);
Сэм Соффс
1
Ссылка выше, к сожалению, сейчас не работает ( thinkvitamin.com/design/… ).
Per Quested Aronsson
Одна из проблем заключается в том, что для <select>блоков он не отображает стрелку в браузере рабочего стола. Так что лучше всего в сочетании с медиа-запросом, я думаю.
andrewtweber
Что ... Было ли это действительно так просто? Я использовал много CSSлиний для стилизации, и этой линии было достаточно, чтобы добиться цели ?!
19

Пожалуйста, добавьте этот код CSS

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Subindas вечера
источник
9

Я недавно столкнулся с этой проблемой сам.

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

Надеюсь, это поможет.

Цифровой робот Горилла
источник
3
Это все еще не позволяет мне изменять высоту кнопки. Забавно, но, как только я придаю кнопке настраиваемую ширину, настраиваемая высота также учитывается.
грипп
Это было исправлением для UIkit v3.
Калоб Таульен,
4

Используйте ниже CSS

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
Развернуть фрагмент

Винод
источник
0

внешний вид: нет;

Примечание: используйте bootstrap для стилизации кнопки. Обычно для отзывчивого.

Картиха Карти
источник
0

У меня была та же самая проблема сегодня, используя Primefaces (primeng) и Angular 7. Добавьте следующее в ваш style.css

p-button {
   -webkit-appearance: none !important;
}

Я также использую немного начальной загрузки, которая имеет reboot.css, который переопределяет его (вот почему я должен был добавить! важно)

button {
  -webkit-appearance: button;

}

djnose
источник