如何添加“搜索”按钮在文本输入字段？ [英] How do I add a "search" button in a text input field?

问题描述

如何为

How do I create a similar "search" element to the one in this site?

If we view source, he has one textbox followed by a <span> tag.

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

Where do I get a similar "magnifying glass" image?

解决方案

Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

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

Working example on JSBin

这篇关于如何添加“搜索”按钮在文本输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！