1

CSS3 を使用して、ガラスの画像で検索ボックスを表示しようとしています。私は基本的にテキストボックスに画像を配置し、そのleft-margin. 私のコードはここにあります：

<body>
    <form id="header-search">
        <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
    </form>
</body>



#header-search{overflow:auto;}

#header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;


    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;

     border:1px solid #8e8e8e;

     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;

 }

#header-search input.button{
    border:0px dashed red;
    padding:0;
    margin:0 0 0 -185px;
    width:24px;
    height:24px;
    background:transparent url(../images/SearchImage.png) center center  no-repeat;
    float:left;
}

アップデート

  1. 私はpxではなくemを使用していません
  2. 別のCSSリセットを試しました。
  3. 詳細な違いについては画像をご覧ください。
  4. このコードは、他のコード行がない新しい css/html ファイルで実行しました。 ここに画像の説明を入力
4

3 に答える 3

1
  1. 検索入力ボックスに画像を配置したい場合は、これを試すことができますhttp://jsfiddle.net/HmKZQ/1/
  2. クリック用のボタンが必要な場合は、これを試すことができます http://jsfiddle.net/HmKZQ/3/
于 2012-08-20T10:45:22.443 に答える