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?
An alternative method is to position the button absolutely and attach it to the right. A benefit of this is that you can more easily implement the focus/active border around the text box. You can get around the text under the button issue by giving padding-right to the text box.
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS. Step 2: Add <div> tag in the HTML body with class container. Step 3: Now add any icon that you want using the below syntax, where the name is the name of glyphicon.
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
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.
What you need to do is add a wrapper div around the input:text and input:submit.
The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.
It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.
You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
.search { border: 1px solid #000000; width: 200px; } .search input[type="text"] { background: none; border: 0 none; float: left; height: 1.5em; line-height: 1.5em; margin: 0; padding: 3px 0; width: 180px; } .search input[type="submit"] { background: #CCCCCC url(path/to/image.jpg); border: 0 none; height: 1.5em; line-height: 1.5em; margin: 0; padding: 3px 0; text-indent: 100px; width: 20px; }
<form ...> <div class="search"> <input type="text" /> <input type="submit" /> </div> </form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With