Chrome/Safari: pole cienia pojawia się tylko przy wprowadzaniu tekstu, jeśli określono granicę

Question

Występuje problem z przeglądarkami WebKit (Chrome 15.0.x i Safari 5.1.1), w których cienie pudełek nie są renderowane na wejściach tekstowych . Przypadkiem odkryłem, że jawne ustawienie granicy powoduje renderowanie ramki cienia, nawet jeśli ustawisz granicę na "brak" lub wartość domyślną "wstawka". Poniższy kod (zobacz go w akcji pod numerem JSFiddle) zademonstrował problem podczas przeglądania w przeglądarce Chrome lub Safari, ale renderował się zgodnie z oczekiwaniami w przeglądarkach Firefox 6.0.2 i Opera 11.52.

HTML

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

CSS

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

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

jestem brakuje jakiś szczegół z użyciem cieni pudełko w WebKit lub nie znalazłem błąd?

Answer 1

input s, w WebKit, mają tę właściwość stosowanej do nich domyślnie:

-webkit-appearance: textfield; 

To jest to, co chcesz, jeśli chcesz wygląd pola tekstowego być zależne od platformy. Czasem można go ustawić w ten sposób, ale w innych przypadkach musi być ustawiony na none, co sprawia, że ​​stosuje standardowy CSS i mniej polega na systemie operacyjnym. Wydaje się, że border automatycznie uruchamia to, ale box-shadow nie, ale box-shadow jest stosowane tylko wtedy, gdy -webkit-appearance jest none. (fakt, że wygląd zależny od platformy nie jest wyłączany, jeśli box-shadow jest zastosowany i że box-shadow nie zostanie wyrenderowany, jeśli włączony jest wygląd zależny od platformy, może być błędem)

Aby to naprawić, po prostu powiedz mu, aby nie używać wygląd zależne od platformy:

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

Test it z -webkit-appearance: none; dodaną.

Wadą tego jest utrata (niektóre) natywnego wyglądu platformy, ale jeśli próbujesz użyć box-shadow, być może starasz się odciąć wygląd natywny.