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

215

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

— mheavers
источник

526

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

-webkit-appearance: none;

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

— Джонас Г. Дрейндж
источник

Есть еще разница в нажатии кнопки: активный стиль, верно? Он игнорирует ваши стили и применяет полупрозрачный серый наложение?

— Алан Х.

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