Home > Article > Web Front-end > How to Create a Search Button Inside a Text Input Field?
How to Implement a Search Button in a Text Input Field
To mimic the search element found on many websites, you can combine a text input field with a span tag.
Adding the Search Button
Wrap the search button within the span tag:
<code class="html"><span id="g-search-button"><img src="magnifying-glass.png" alt="Search"></span></code>
Styling the Button
To position the button to the left of the text input, apply custom styles:
<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 image URL */ }</code>
Acquiring the Magnifying Glass Image
You can find free magnifying glass images on websites like IconFinder or The Noun Project.
The above is the detailed content of How to Create a Search Button Inside a Text Input Field?. For more information, please follow other related articles on the PHP Chinese website!