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

215

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

— mheavers
джерело

524

Ви можете шукати

-webkit-appearance: none;

Сафарі CSS зазначає о -webkit-appearance
Мережа розробників Mozilla -moz-appearance

— Йонас Г. Дранж
джерело

Існує ще різниця в натисканні кнопок /: активна стилізація, правда? Він ігнорує ваші стилі та застосовує напівпрозору сіру накладку?

— Алан Х.

6

Якщо ви використовуєте SCSS, використовуйте@include experimental(appearance, none);

— Сем Соффс

1

Наведене вище посилання тепер, на жаль, мертве ( thinkvitamin.com/design/… ).

— Запитаний Аронсон

Одне питання з цим полягає в тому, що для <select>вікон він не відображає стрілку, коли перебуває в браузері Desktop. Тож це найкраще в поєднанні з медіа-запитом, який я думаю.

— andrewtweber

Що ... Це було насправді так просто? Я використав багато CSSліній для стилю, і цієї лінії було достатньо, щоб зробити трюк ?!

19

Будь ласка, додайте цей код css

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

— субінди вечора
джерело

9

Нещодавно я сам натрапив на цю проблему.

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

Сподіваюся, що це допомагає.

— Цифровий робот Gorilla
джерело

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

-webkit-поява: немає;

Примітка: використовуйте завантажувальний інструмент для стилювання кнопки. Він загальний для чуйного реагування.

— Картиха Карті
джерело

0

У мене була така ж проблема сьогодні, використовуючи праймери (primeng) та angular 7. Додайте наступне до свого style.css

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

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

button {
  -webkit-appearance: button;

}

— djnose
джерело