Home > Web Front-end > CSS Tutorial > How to Create a Search Button within a Text Input Field?

How to Create a Search Button within a Text Input Field?

DDD
Release: 2024-11-02 10:15:03
Original
704 people have browsed it

How to Create a Search Button within a Text Input Field?

Creating a Search Button within a Text Input Field

To achieve the search element seen in the provided screenshot, you require both a text input field and an adjacent span element.

The text input field can be created using the following code:

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

For the magnifying glass image, you can use the background-image property to overlay it within the span element. Additionally, relative positioning can be employed to align the image with the right end of the search box.

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

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

In the CSS code, the width and height determine the size of the image, while the left and top properties position it relative to the search box. The background-color property can be replaced with the URL of your desired magnifying glass image.

Here is a working example on JSBin to demonstrate: [Link to JSBin Example]

The above is the detailed content of How to Create a Search Button within a Text Input Field?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template