Search box CSS problems -
i'm newbie. , try make search box. when open on firefox. it's okay me. in ie, chrome , safari. it's not cool actually. know problems, please me fix it?
i want make search box this: http://www.behance.net/gallery/anthracite-eikon/7171451
<div id="search-box"> <input type="text" name="search" placeholder="search..."/> </div>
and 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; }
in css input
need change top:15
top:15px
, change line-height 24px;
Comments
Post a Comment