我是新手。我试着做一个搜索框。当我在Firefox上打开它时。对我来说没关系。然后我在IE、Chrome 和 Safari中进行操作。其实并不酷。有谁知道我的问题，请帮我解决？
我想做一个这样的搜索框：http ://www.behance.net/gallery/Anthracite-EIKON/7171451
<div id="search-box">
<input type="text" name="search" placeholder="Search..."/>
</div>
和 CSS：
*{ margin: 0; padding: 0; }
#search-box{
background: -moz-linear-gradient(top right, #353535, #010101);
background: -webkit-linear-gradient(top right, #353535, #010101);
background: -ms-linear-gradient(top right, #353535, #010101);
background: -o-linear-gradient(top right, #353535, #010101);
background: linear-gradient(top right, #353535, #010101);
padding: 30px 0;
position: relative;
}
input {
font-family: Cambria, 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
color: #bebebe;
font-weight: 400;
line-height: 56px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) ;
border-radius: 13px;
border: 1px solid #000000;
background-clip: border-box;
padding: 5px 4px 3px 24px;
width: 94px;
height: 27px;
box-shadow: 0 0 9px #121212 inset;
position: absolute;
right: 25px;
top: 15;
background-color: #444444 ;
background-image: url('images/search_icon.png');
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: 9px 8px;
}
input:hover {
box-shadow: none;
}
input:focus {
width: 200px;
box-shadow: none;
text-shadow: none;
color: #4D4E52;
background-color: white ;
background-image: url('images/search_icon5.png');
background-repeat: no-repeat;
background-position: 9px 8px;
}