Вставка тени теней не работает

Question

Я пытаюсь получить внутреннюю тень, работающую над полем ввода в Chrome. К сожалению, пока это не работает. Вы можете просмотреть jsfiddle здесь: http://jsfiddle.net/XgsPT/2/

Мой CSS:

input { 
margin-top: 15px; 
margin-left: 15px; 
-moz-box-shadow: inset 0 0 10px #000000; 
-webkit-box-shadow: inset 0 0 10px #000000; 
box-shadow:   inset 0 0 10px #000000; 
} 

И это простой HTML:

<input type="text" width="30"> 

Но не появляется тень ... (Chrome 24)

Answer 1

Цвет фона input - это беспорядок. Проверьте this updated fiddle с этим изменения в CSS:

input { 
    /* ... rest as before ...*/ 
    background-color: transparent; 
} 

Answer 2

Вместо установки фона на прозрачном установить его на белый или любой цвет, который вам нравится, вы просто должны объявить его, а затем он будет работать как надо

Answer 3

В принципе, WebKit не позволяет нам добавлять тень для создания элементов управления с естественным внешним видом. Нам нужно удалить внешний вид nativa.

input { 
    -webkit-appearance: none; 
    box-shadow: inset 0 0 10px #000000; 
} 

Кроме того, некоторые свойства CSS, такие как граница и фон, подразумевают -webkit-appearance: none.

Answer 4

Дайте границе поля ввода, и поле теней, наконец, будет работать.

http://jsfiddle.net/Jx8xF/

input { 
    margin-top: 15px; 
    margin-left: 15px; 
    -moz-box-shadow: inset 0 0 10px #aaa; 
    -webkit-box-shadow: inset 0 0 10px #aaa; 
    box-shadow:   inset 0 0 10px #aaa; 
    border: 1px solid #aaa; 

}