Home >Web Front-end >CSS Tutorial >How to Create a Custom \'Search\' Button with a Magnifying Glass Icon?
Embellishing Text Input Fields with a Custom "Search" Button
To create a similar search element to the one seen on certain websites, follow these steps:
Creating the Basic Structure:
<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>
<code class="html"><span id="g-search-button"></span></code>
Adding the Magnifying Glass Image:
To incorporate the magnifying glass image, assign it using CSS's background-image property:
<code class="css">#g-search-button { background-color: black; /* Replace with your own image */ }</code>
Positioning and Styling:
To position the image within the text input field:
<code class="css">#g-search-button { position: relative; left: -22px; top: 3px; width: 16px; height: 16px; }</code>
This places the image slightly to the left, overlapping the right edge of the search box.
Customization:
Modify the appearance of the button by adjusting the values in the #g-search-button CSS block, including the background color, size, and positioning.
Example in Action:
Refer to the following JSBin example to see a fully functional implementation of the search element:
[JSBin Demo](https://jsbin.com/xahepu/edit?html,css,output)
The above is the detailed content of How to Create a Custom \'Search\' Button with a Magnifying Glass Icon?. For more information, please follow other related articles on the PHP Chinese website!