Chrome/Safari: kutu gölgesi, yalnızca kenarlık belirtiliyorsa metin girişinde görünür

Question

WebKit tarayıcılarında (Chrome 15.0.x ve Safari 5.1.1) bir sorunla karşılaşıyorum, burada kutu gölgeleri metin girişlerinde gösterilmiyor . Şans eseri, sınırın açık olarak ayarlanmasının, kenarlığı 'hiçbiri' veya varsayılan 'eke' ayarlamış olsanız bile kutu gölgesinin oluşmasına neden olduğunu keşfettim. Aşağıdaki kod (JSFiddle numaralı telefondan görüntülenebilir), Chrome veya Safari ile görüntülendiğinde sorunu gösterdi, ancak Firefox 6.0.2 ve Opera 11.52'de beklendiği gibi işleniyor.

HTML

<input type="text" value="Works" style="border:none;" /> 
<input type="text" value="Works" style="border:inset;" /> 
<input type="text" value="Doesn't" /> 

input[type="text"] { 
    margin: 1em; 

    -webkit-box-shadow: 0px 0px 2px 1px green; 
    box-shadow: 0px 0px 2px 1px green; 
} 

ben bir hata ile veya WebKit'teki kutu gölgeleri kullanmanın bazı ayrıntı eksik CSS? metin alanına görünümü platforma bağımlı olmasını istiyorsanız

-webkit-appearance: textfield; 

İstediğin geçerli:

Answer 1

input s, WebKit'teki, varsayılan olarak kendilerine uygulanan bu özelliği var. Bazen bunu hala ayarlanmış olarak kullanabilirsiniz, ancak diğer zamanlarda, standart CSS'yi uygulayıp işletim sistemine daha az güvenerek, none olarak ayarlanması gerekir. Görünüşe göre border otomatik olarak bunu tetikler, ancak box-shadow henüz box-shadow ise -webkit-appearancenone ise uygulanır. (Platform bağımlı görünüm etkinse box-shadow uygulanmışsa ve platform bağımlı görünümü etkinleştirilmişse box-shadow işlenmemişse platform bağımlı görünümün kapatılmamış olması gerçeği olabilir)

10 Bunu düzeltmek için, açıkça belirtin. -webkit-appearance: none; ile

input[type="text"] { 
    -webkit-appearance: none; 
} 

Test it eklendi: platforma göre bir görünüm kullanın.

Bunun dezavantajı, platformun yerel görüntüsünü kaybedersiniz (bir kısmı), ancak box-shadow'u kullanmaya çalışıyorsanız, yine de yerel görünümü uzaklaştırmaya çalışıyor olabilirsiniz.