如何在文本输入字段中添加"搜索"按钮？
Som*_*one 21 html css icons css3
如何为此站点中的元素创建类似的"搜索"元素？
如果我们查看源代码,他会有一个文本框,后跟一个<span>标记.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
我在哪里可以获得类似的"放大镜"图像？
cas*_*nca 25
将图像放入范围,例如使用background-image,然后给它一个相对位置并将其移到左侧,使其与搜索框的右端重叠,例如:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
zzz*_*Bov 13
你的眼睛在欺骗你.该按钮不在文本框中.使用背景图像不是可行的方法,因为它不会提供可点击的提交按钮.
你需要做的是在输入周围添加一个包装div:text和input:submit
包装器看起来像是一个文本框,但实际上包含一个透明文本框和一个提交按钮.您需要专门删除输入的样式:text和input:submit elements
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Input Example</title>
<style type="text/css">
/* <![CDATA[ */
.search
{
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"]
{
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"]
{
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
/* ]]> */
</style>
</head>
<body>
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
</body>
</html>
保持提交按钮非常重要,否则在搜索时按Enter键将没有默认反应.此外,在文本字段后面放置提交按钮允许人们实际点击按钮.
编辑:你可以制作自己的放大图像,它们很容易用20x20px透明png制作.
如果您在Google Chrome浏览器中查看该页面,请右键单击搜索按钮并选择"检查元素",您将能够看到用于实现此效果的CSS.
如果你不熟悉CSS,我会全面推荐'CSS:The Definitive Guide'.
- 优雅的答案+1.还应该提到Firefox的Firebug. (5认同)
| 归档时间： |
|
| 查看次数： |
78656 次 |
| 最近记录： |