İOS giriş gölgesini kaldır

91

İOS'ta (Safari 5) giriş öğesi (üst iç gölge) için takip etmem gerekiyor:

misal

Üst gölgeyi kaldırmak istiyorum, hata -webkit-appearancekaydetmiyor.

Mevcut stil:

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

— BEYAZ RENK
kaynak

3

Bir yan not olarak, genel inputseçicide '-webkit-görünümü' ayarını dikkatli bir şekilde yapmanız gerekir . Radyo düğmeleri ve onay kutuları üzerinde istenmeyen etkilere neden olabilir.

— davidpauljunior

Teşekkürler elementte kullanıyorum

— WHITECOLOR

203

-webkit-appearance: none;Varsayılan IOS stillerini geçersiz kılmak için kullanmanız gerekecek . Ancak, inputCSS'de yalnızca etiketin seçilmesi , varsayılan IOS stillerini geçersiz kılmaz çünkü IOS, stillerini bir nitelik seçici kullanarak ekler input[type=text]. Bu nedenle, CSS'nizin önceden ayarlanmış varsayılan IOS CSS stillerini geçersiz kılmak için bir nitelik seçici kullanması gerekecektir.

Bunu dene:

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

Yararlı Bağlantılar:

appearanceBuradan daha fazla bilgi edinebilirsiniz:

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

CSS öznitelik seçicileri hakkında daha fazla bilgi edinmek isterseniz, burada çok bilgilendirici bir makale bulabilirsiniz:

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

— Mastrianni
kaynak

3

Bu stilleri de uygulamak isteyebilirsiniz input[type=password].

— Rockallite

1

Bu gönderi neredeyse 4 yaşında. Bunun güncellenmesi gerekiyor mu?

1

Şu anda kullanılan Safari seçici textarea, input[type="range"], input, input:matches([type="password"], [type="search"])- sadece kullanın ve tüm durumlarda çalışmalıdır.

— da_berni

Ben uygulandığında Benim için sadece çalıştı !importantetmek appearance. Ayrıca s appearanceiçin de çalışmalı select.

— RuiVBoas

30

background-clip: padding-box;

Gölgeleri de kaldırıyor gibi görünüyor.

Şöyle @davidpauljunior belirtildiği; -webkit-appearancegenel bir giriş seçiciyi ayarlarken dikkatli olun .

— jstnrs
kaynak

1

background-clip: padding-box;iOS'ta metin giriş alanındaki gölgeyi kaldırır. Örneğin codepen.io/jstnrs/pen/YXBLVN adresine bakın (URL'yi bir iOS cihazında açtığınızdan emin olun).

— jstnrs

3

Bu işe yarıyor, ancak nasıl çalıştığını bilen var mı? Teşekkürler.

— Nostalg.io

benim için çalışmadı ama -webkit-appearance: none;yaptı.

— Lefi Tarık

5

webkit tüm özellikleri kaldıracak

-webkit-appearance: none;

Giriş öğenizdeki gölgeyi kaldırmak için özellik kutusu gölgesini kullanmayı deneyin

box-shadow: none !important;

— ShinyJos
kaynak

4

Bunun çözümü ile gelip çalıştı a.) Çalışır ve b.) Ben çalıştığını anlamak mümkün duyuyorum .

Girişler için gölgenin (ve giriş [type = "arama"] için yuvarlatılmış kenarlığın) bir arka plan resminden geldiğini biliyorum.

Açıkçası ayar background-image: noneilk denememdi, ama bu işe yaramıyor gibi görünüyor.

Ayar background-image: url()işe yarıyor, ancak hala boş olması konusunda endişeliyim url(). Ancak şu anda sadece kötü bir duygu.

background-clip: padding-box; işi de yapıyor gibi görünüyor, ancak "arka plan klibi" belgelerini okuduktan sonra bile bunun neden arka planı tamamen kaldırdığını anlamıyorum.

En sevdiğim çözüm:

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

Bu geçerli bir css ve nasıl çalıştığını anlıyorum.

— Andreas Riedmüller
kaynak

@BugWhisperer Benim için iOS 12.4'te çalışıyor: codepen.io/receter/pen/ymMzRG Daha fazla ayrıntı verebilir misiniz?

— Andreas Riedmüller

benim için çalışmadı, ama background-clip: padding-box !importantçalıştı.

— oldboy

@BugWhisperer codepen.io/receter/pen/ymMzRG'deki örneklerin işinize yarayıp yaramadığını kontrol edebilir misiniz? Ayrıca sizin için çalışıp background-image: linear-gradient(transparent, transparent) !important;çalışmadığını deneyebilir misiniz? Burada sorunun ne olduğunu öğrenmekten memnuniyet duyarım.

— Andreas Riedmüller

maalesef telefonumu yeni güncelledim. hepsi codepen aracılığıyla safari ve kromda çalışıyor, ancak yerel olarak test etseydin aynı sonuçları alır mıydın merak ediyorum

— oldboy

2

Kabul cevap iken diğerleri işaret olarak, sadece kimin girişler için çalışır, iyi bir başlangıç typeolduğunu "text". İOS'ta metin kutuları olarak da işlenen sayısız başka girdi türü vardır ve bu nedenle bu kuralı diğer türleri de hesaba katmak için genişletmemiz gerekir.

İşte, hepsi de mütevazı <input>etiket kullanılarak yazılan düğmeler, onay kutuları, aralık kaydırıcıları, tarih / saat açılır menüleri ve radyo düğmeleri için varsayılan stili korurken, giriş metin alanlarını ve metin alanlarını ortadan kaldırmak için kullandığım CSS. .

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

— Tom Spencer
kaynak

-7

Bu benim için daha iyi çalışıyor. Ayrıca, her farklı giriş türüne (yani metin, telefon, e-posta vb.) Uygulamak zorunda olmadığım anlamına gelir.

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

— Reado
kaynak