(-webkit-box-shadow:inset) not working in Chrome

Hello, can’t get (-webkit-box-shadow:inset) to work in Chrome… Help !


header input[type='search'] {
	border: 1px solid #000;
	box-shadow:inset 2px 2px 5px #202020; /* CSS3 */	
	-moz-box-shadow:inset 2px 2px 5px #202020; /* Firefox */
	-webkit-box-shadow:inset 2px 2px 5px #202020; /* Safari, Chrome */		
	font-size: 1.4em;
	height: 28px;
	padding: 0 5px 0;
	width: 200px;		
}

Thank you…

The input type="search doesn’t allow the box shadow to work. Input type=text is ok but “search” isn’t.

You can try adding -webkit-appearance:none and it should allow the shadow to apply but may change how the element looks.


input[type="search"] {
	border: 1px solid #000;
	-moz-box-shadow:inset 2px 2px 5px #202020; /* Firefox */
	-webkit-box-shadow:inset 2px 2px 5px #202020; /* Safari, Chrome */
	box-shadow:inset 2px 2px 5px #202020; /* CSS3 */
	font-size: 1.4em;
	height: 28px;
	padding: 0 5px 0;
	width: 200px;
	border:none;
	-webkit-appearance:none;
}