使用CSS3和背景上的固定图像执行输入类型="文本"

Question

我正在开发我的第一个HTML5/CSS3网站,我想尽我所能,并且使用好的方法并且也可用.

我必须重现本网站的下一个搜索输入:

我不知道该怎么做是实现图像的背景,或者图像需要是一个<input type="image" />.

目前,我是下一个:

#header-search input {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:16px;
    padding:4px;
    color:#4a4a4a
}

这将创建一个半径相同的输入,所有区域都是输入文本.放大镜没有空间,如果是背景,则无法点击图像.在这一点上,什么是最好的？让输入只触发或......你将如何做？

无论如何你会这样做,请告诉我.

先感谢您!

Answer 1

您可以使用带有背景图像的提交按钮并将其放在搜索框上.

不要忘记在输入框的右侧添加填充以允许按钮不重叠.(我还在搜索框中添加了一个类,因此规则不会针对相同的元素)

HTML

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

CSS

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

最终的结果是

演示http://jsfiddle.net/gaby/F5Nmp/1/