Hapus bayangan masukan iOS

91

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

contoh

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;
}

ios css input

— WARNA PUTIH
sumber

3

Sebagai catatan tambahan, Anda harus berhati-hati dalam menyetel '-webkit-appearance' pada inputpemilih umum . Ini dapat menyebabkan efek yang tidak diinginkan pada tombol radio dan kotak centang.

— davidpauljunior

Terima kasih saya menggunakannya pada elemen

— WHITECOLOR

203

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/

— Mastrianni
sumber

3

Anda mungkin juga ingin menerapkan gaya ini ke input[type=password].

— Rockallite

1

Posting ini sudah hampir 4 tahun. Apakah ini perlu diperbarui?

1

Pemilih Safari yang saat ini digunakan adalah textarea, input[type="range"], input, input:matches([type="password"], [type="search"])- gunakan saja dan itu akan berfungsi untuk semua kasus.

— da_berni

Bagi saya, itu hanya berhasil ketika saya melamar !importantke appearance. Juga appearanceharus bekerja untuk selects juga.

— RuiVBoas

30

background-clip: padding-box;

Sepertinya untuk menghilangkan bayangan juga.

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

— jstnrs
sumber

1

background-clip: padding-box;akan menghapus bayangan di dalam kolom input teks di iOS. Lihat codepen.io/jstnrs/pen/YXBLVN misalnya (pastikan untuk membuka URL di perangkat iOS).

— jstnrs

3

Ini berhasil, tetapi apakah ada yang tahu cara kerjanya? Terima kasih.

— Nostalg.io

tidak berhasil untuk saya tetapi -webkit-appearance: none;berhasil.

— Lefi Tarik

5

webkit akan menghapus semua properti

-webkit-appearance: none;

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

box-shadow: none !important;

— ShinyJos
sumber

4

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.

— Andreas Riedmüller
sumber

@BugWhisperer Ini berfungsi di iOS 12.4 untuk saya: codepen.io/receter/pen/ymMzRG Dapatkah Anda memberikan detail lebih lanjut?

— Andreas Riedmüller

tidak bekerja untuk saya, tetapi background-clip: padding-box !importantberhasil.

— oldboy

@BugWhisperer Dapatkah Anda memeriksa apakah contoh pada codepen.io/receter/pen/ymMzRG bekerja untuk Anda? Juga dapatkah Anda mencoba jika background-image: linear-gradient(transparent, transparent) !important;berhasil untuk Anda? Saya akan senang mengetahui apa masalahnya di sini.

— Andreas Riedmüller

sayangnya saya baru saja memperbarui ponsel saya. semuanya bekerja di safari dan chrome melalui codepen, tetapi saya ingin tahu apakah Anda akan mendapatkan hasil yang sama jika Anda mengujinya secara asli

— oldboy

2

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;
}

— Tom Spencer
sumber

-7

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;
}

— Reado
sumber