Tombol input styling untuk iPad dan iPhone

214

Saya menggunakan CSS untuk mendesain tombol input di situs web saya, tetapi pada perangkat iOS, style digantikan oleh tombol default Mac. Apakah ada cara untuk mendesain tombol untuk iOS, atau cara untuk membuat hyperlink yang berperilaku seperti tombol kirim?

— mheavers
sumber

524

Anda mungkin sedang mencari

-webkit-appearance: none;

Catatan Safari CSS aktif -webkit-appearance
Jaringan Pengembang Mozilla -moz-appearance

— Jonas G. Drange
sumber

Masih ada perbedaan dalam penekanan tombol /: styling aktif, kan? Ini mengabaikan gaya Anda dan menerapkan overlay abu-abu semitransparan?

— Alan H.

6

Jika Anda menggunakan SCSS, gunakan@include experimental(appearance, none);

— Sam Soffes

1

Tautan di atas sekarang mati, sayangnya ( thinkvitamin.com/design/... ).

— Per Quested Aronsson

Satu masalah dengan ini adalah bahwa untuk <select>kotak, itu tidak menampilkan panah ketika di browser Desktop. Jadi ini yang terbaik dipasangkan dengan kueri media saya pikir.

— andrewtweber

Apa ... Apakah ini sesederhana ini? Saya menggunakan banyak CSSgaris untuk mendesainnya dan garis ini cukup untuk melakukan triknya ?!

19

Silakan tambahkan kode css ini

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

— subindas pm
sumber

9

Saya sendiri baru-baru ini menemukan masalah ini.

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

Semoga itu bisa membantu.

— Robot Digital Gorilla
sumber

3

Itu masih tidak memungkinkan saya untuk mengubah ketinggian tombol. Lucunya, segera setelah saya memberikan tombol lebar kustom, tinggi kustom juga diperhitungkan.

— Flu

Ini adalah perbaikan untuk UIkit v3.

— Kalob Taulien

4

Gunakan css di bawah ini

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!" />

Luaskan cuplikan

— vinod
sumber

0

-webkit-appearance: tidak ada;

Catatan: gunakan bootstrap untuk menata tombol. Ini umum untuk responsif.

— Karthiha Karthi
sumber

0

Saya memiliki masalah yang sama hari ini menggunakan primefaces (primeng) dan angular 7. Tambahkan yang berikut ini ke style.css Anda

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

saya juga menggunakan sedikit bootstrap yang memiliki reboot.css, yang menimpanya (itulah sebabnya saya harus menambahkan! penting)

button {
  -webkit-appearance: button;

}

— djnose
sumber