如何在文本输入字段中创建“搜索”按钮？

在文本输入字段中创建“搜索”按钮

查看某些网站的源代码时，您可能会注意到“搜索” ”元素由一个文本框和一个“放大镜”按钮组成。本文将指导您完成在 Web 应用程序中创建类似元素的过程。

获取“放大镜”图像

创建“放大镜”图像，您可以使用 SVG 图标或小型 PNG 图像。在线提供了大量资源，您可以在其中找到免费或商业图标。

实现按钮

获得图像后，您可以将其合并到文本输入中使用 CSS 的字段。这是一个示例：

<code class="CSS">#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}</code>

在此 CSS 代码中：

• display: inline-block;允许将元素放置在带有文本的行上。
• 宽度和高度指定按钮的尺寸。
• 位置：相对；允许您手动调整按钮的位置。
• 将按钮向左和上移动到与搜索框右端重叠的位置。
• 背景颜色可以替换为实际颜色

工作示例

以下 JSBin 提供了一个代码的工作示例：https://jsbin.com/vehobew/edit?html,css,output

以上是如何在文本输入字段中创建“搜索”按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！