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


215

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

Ответы:


526

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

-webkit-appearance: none;

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

6
Если вы используете SCSS, используйте@include experimental(appearance, none);
Сэм Соффс

1
Ссылка выше, к сожалению, сейчас не работает ( thinkvitamin.com/design/… ).
Per Quested Aronsson

Одна из проблем заключается в том, что для <select>блоков он не отображает стрелку в браузере рабочего стола. Так что лучше всего в сочетании с медиа-запросом, я думаю.
andrewtweber

Что ... Было ли это действительно так просто? Я использовал много CSSлиний для стилизации, и этой линии было достаточно, чтобы добиться цели ?!


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;

}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.