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" />
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 */ }
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!