Question

我正在开发我的第一个HTML5 / CSS3网站，我希望能够正确地完成所有方法并使用方法并且也可用。

我必须在这个网站上重现下一个搜索输入：

Search Box

我不知道该怎么做才能实现图像的背景，或者图像需要是<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;
}

最终结果是

enter image description here

demo http://jsfiddle.net/gaby/F5Nmp/1/

Answer 2

你应该尝试：

background-image : url(path/to/your/image/relative/to/css/file) no-repeat;
background-position : right;

您不需要

<input type="image"/> <!-- this can be used to replace a submit control
                           for example, but not what you need I think -->

您还应该考虑使用更具体的CSS规则（以防止为其他输入设置样式）

#header-search input[type="text"]

Answer 3

我能想到的最好的是以下，这比我想要的要复杂得多：

#header-search, button {
    display: inline-block;
    vertical-align: baseline;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:30px;
    padding:4px;
    color:#4a4a4a;
    margin: 0;
    float: left;
}
#header-search {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    border-right-width: 0;
}
button {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    border-left-width: 0;
}

并涉及修改标记（并添加button type="submit"以包含放大镜图像，叹息......）：

<input type="search" id="header-search" />
<button type="submit">
    <img src="http://davidrhysthomas.co.uk/linked/search.png" />
</button>

JS Fiddle demo

注意：请注意，由于我目前不知道的某些原因，我在id 本身上使用#header-search input，而非父元素。所以你的选择器需要修改我在上面例子中使用的选择器。

<小时/> 已修改，因为在搜索范围input之后，焦点上的轮廓看起来是错误的（检查original JS Fiddle demo）。所以，我用border颜色变化替换了轮廓，使它看起来更“自然”：

#header-search:focus {
    border-color: #f90;
    border-right-width: 0;
}

#header-search:focus + button[type=submit] {
    border-color: #f90;
    border-left-width: 0;
}

Revised JS Fiddle demo

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

3 个答案: