在文本输入字段中创建搜索按钮
要实现所提供的屏幕截图中看到的搜索元素,您需要文本输入字段和相邻的 span 元素。
可以使用以下代码创建文本输入字段:
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
对于放大镜图像,可以使用 background-image 属性来叠加它在 span 元素内。另外,还可以使用相对定位将图像与搜索框的右端对齐。
#g-search-button { display: inline-block; width: 16px; height: 16px; position: relative; left: -22px; top: 3px; background-color: black; /* Replace with your own image */ }
在 CSS 代码中,宽度和高度决定图像的大小,而左侧和顶部决定图像的大小。属性将其相对于搜索框定位。背景颜色属性可以替换为您想要的放大镜图像的 URL。
这里有一个 JSBin 上的工作示例来演示:[链接到 JSBin 示例]
以上是如何在文本输入字段中创建搜索按钮?的详细内容。更多信息请关注PHP中文网其他相关文章!