Кнопки ввода стилей для iPad и iPhone

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

Ответ 1

Возможно, вы ищете

-webkit-appearance: none;

Заметки Safari CSS на -webkit-appearance
Сеть разработчиков Mozilla -moz-appearance

Ответ 2

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

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Ответ 3

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

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

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

Ответ 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!" />

Ответ 5

-webkit-appearance: none;

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

Ответ 6

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

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-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!" />

Ответ 7

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

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

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

button {
  -webkit-appearance: button;

}