如何创建带有放大镜图标的自定义'搜索”按钮？

使用自定义“搜索”按钮修饰文本输入字段

要创建与某些网站上看到的类似的搜索元素，请按照这些步骤：

创建基本结构：

1. 编写文本输入字段：

<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>

2. 包括一个标签来保存放大镜图像：

<code class="html"><span id="g-search-button"></span></code>

添加放大镜图像：

要合并放大镜图像，请使用CSS的背景指定它-image 属性：

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

定位和样式：

要在文本输入字段中定位图像：

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

此位置图像稍微向左倾斜，与搜索框的右边缘重叠。

自定义：

通过调整 #g 中的值来修改按钮的外观-search-button CSS 块，包括背景颜色、大小和位置。

实际示例：

请参阅以下 JSBin 示例以查看完整功能搜索元素的实现：

[JSBin 演示](https://jsbin.com/xahepu/edit?html,css,output)

以上是如何创建带有放大镜图标的自定义'搜索”按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！