Hapus bayangan masukan iOS

Di iOS (Safari 5) saya harus mengikuti untuk elemen input (bayangan bagian dalam atas):

Saya ingin menghapus bayangan atas, bug -webkit-appearancetidak disimpan.

Gaya saat ini adalah:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Anda harus menggunakan -webkit-appearance: none;untuk mengganti gaya IOS default. Namun, memilih hanya inputtag di CSS tidak akan menimpa gaya IOS default, karena IOS menambahkan gayanya dengan menggunakan pemilih atribut input[type=text]. Oleh karena itu, CSS Anda perlu menggunakan selektor atribut untuk mengganti gaya CSS IOS default yang telah ditetapkan sebelumnya.

Coba ini:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Tautan Bermanfaat:

Anda dapat mempelajari lebih lanjut di appearancesini:

http://css-tricks.com/almanac/properties/a/appearance/

Jika Anda ingin mempelajari lebih lanjut tentang pemilih atribut CSS, Anda dapat menemukan artikel yang sangat informatif di sini:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Sepertinya untuk menghilangkan bayangan juga.

Seperti yang disebutkan @davidpauljunior ; hati-hati menyetel -webkit-appearancepada pemilih masukan umum.

webkit akan menghapus semua properti

-webkit-appearance: none;

Coba gunakan properti box-shadow untuk menghapus bayangan pada elemen masukan Anda

box-shadow: none !important;

Saya mencoba menemukan solusi yang a.) Berhasil dan b.) Saya dapat memahami mengapa itu berhasil .

Saya tahu bahwa bayangan untuk masukan (dan tepi bulat untuk masukan [type = "search"]) berasal dari gambar latar belakang.

Jadi jelas pengaturan background-image: noneadalah upaya pertama saya, tetapi tampaknya ini tidak berhasil.

Pengaturan background-image: url()berfungsi, tetapi saya masih khawatir tentang kekosongan url(). Padahal saat ini hanya perasaan tidak enak.

background-clip: padding-box; tampaknya melakukan pekerjaan itu juga, tetapi bahkan setelah membaca "klip latar belakang" dokumen saya tidak mengerti mengapa ini sepenuhnya menghapus latar belakang.

Solusi favorit saya:

background-image: linear-gradient(transparent, transparent);

Ini adalah css yang valid dan saya mengerti cara kerjanya.

Sementara jawaban yang diterima adalah awal yang baik, seperti yang ditunjukkan orang lain, itu hanya berfungsi untuk input yang typeada "text". Ada banyak sekali jenis input lain yang juga dirender sebagai kotak teks di iOS, jadi kami perlu memperluas aturan ini untuk memperhitungkan jenis lain ini.

Inilah CSS yang saya gunakan untuk menghilangkan bidang teks input dan area teks dari bayangan bagian dalam, sambil mempertahankan gaya default untuk tombol, kotak centang, slider rentang, dropdown tanggal / waktu dan tombol radio, yang semuanya ditulis menggunakan <input>tag sederhana juga .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Ini bekerja lebih baik untuk saya. Ditambah itu berarti saya tidak perlu menerapkannya ke setiap jenis input yang berbeda (mis. Teks, telp, email, dll).

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