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. 我没有使用 em 而不是 px
  2. 我尝试过不同的css重置。
  3. 请参阅图片了解详细差异。
  4. 我已经在没有其他代码行的新 css/html 文件中完成了这段代码。 在此处输入图像描述
4

3 回答 3

2

position:absolute对于这种事情，使用似乎是一种更可靠的方法。

HTML 

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

CSS

.relative {
  position:relative;
}
.relative .button {
  position:absolute; 
  left: 20px;
  z-index:1;
}

您可能想让这个 css 更具体到这个搜索输入，而不是 all .button's etc

于 2012-08-20T10:15:58.270 回答
2

这是因为您没有指定搜索输入框的宽度。如果你这样做，你的方法就会奏效。

否则，当然，更好的方法是使用 position:absolute 来定位您的按钮。这将确保所有浏览器的布局。

于 2012-08-20T10:17:33.930 回答
1
  1. 如果你想为搜索输入框放置图片，你可以试试这个http://jsfiddle.net/HmKZQ/1/
  2. 如果你需要点击按钮，那么你可以试试这个 http://jsfiddle.net/HmKZQ/3/
于 2012-08-20T10:45:22.443 回答