0

私は初心者です。そして、検索ボックスを作ってみました。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;
}
4

1 に答える 1

0

CSS で、line-height を 24pxに変更するinput必要があります。top:15top:15px

例: http://jsfiddle.net/justincook/sMG3R/

于 2013-05-19T04:17:29.463 に答える