I have a search input field with a magnifying glass inside the box as a background image.
What i'm trying to do is make the magnifying glass clickable to submit the form.
The icon is inside the text input field on the right of the field.
If it helps, the site uses jquery and blueprint css framework.
Making a background-image trigger a form submit is not pretty.
A better approach is to place a regular submit button outside the input, then style things to make it look like the button is inside. That will also preserve accessibility (e.g. blind users will be able to use your website), and pressing Enter will submit your form automatically across all browsers.
See the below code, or check out this jsFiddle for a working proof-of-concept.
<style type="text/css">
.search_field {
display: inline-block;
border: 1px inset #ccc;
}
.search_field input {
border: none;
padding: 0;
}
.search_field button {
border: none;
background: none;
}
</style>
<div class="search_field">
<input name="q" />
<button type="submit"><img src="magnifying_glass.png" alt="Search" /></button>
</div>
I didn't like the aesthetics of the current answer, anyone arriving here looking for a solution using either bootstrap or font-awesome (or your own SVG graphic).
The example works without bootstrap, however the font-icon for the search symbol won't be there.
css
html {
/* to make rem sizes behave */
font-size: 10px;
}
.input-with-icon {
/* causes absolute icon div to be positioned correctly */
position: relative;
width: 25rem;
height: 3.2rem;
box-sizing: border-box;
}
.input-with-icon .form-control {
height: 100%;
width: 100%;
padding-right: 3.65rem;
box-sizing: border-box;
}
.input-with-icon .icon {
position: absolute;
/* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
right: 0.3rem;
top: 0.3rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 0.3rem;
/* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
html
<div class="input-with-icon">
<input type="text" class="form-control" value="thing">
<div class="btn btn-default icon"><span class="glyphicon glyphicon-search"></span>
</div>
</div>
Add a handler for the icon to cause a submit action to occur as desired, this is beyond the scope of this question though...
You cannot add a click event only on a portion of a background image in your input field.
However you could use the click event on the input text field and calculate based on the position of the mouse when the click happen, if the click is indeed on the good portion of the background image but that is quite complicate and the position of the mouse compared to the input text will vary in different browser.
PS: What I would do is design the input field with an image next. For instance look at this input field for the search: http://www.gamefront.com/
[EDIT] Here a sample, tested just with Mozilla. As I said before you need to play with the pixel (distanceFromTop,distanceFromLeft,inputWidth,inputHeight,pictureWitdh) to find the good spot: http://pastebin.com/00rWTadz
<script type="text/javascript">
var tempX = 0;
var tempY = 0;
document.onmousemove = getMouseXY;
function getMouseXY(e) {
tempX = e.pageX;
tempY = e.pageY;
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.getElementById('MouseX').value = tempX;
document.getElementById('MouseY').value = tempY;
return true;
}
function search(){
// position of input field
var distanceFromTop = 60;
var distanceFromLeft = 8;
// size of input field
var inputWidth = 204;
var inputHeight = 20;
// size of picture
var pictureWitdh = 20;
// dont need to check mouse position on axis y
// because onclick event already is on input field
// check mouse position on axis x
if(tempX > (distanceFromLeft+inputWidth-pictureWitdh)){
alert('Did click on the right');
}
}
</script>
<input type="text" id="MouseX" value="0" size="4"> X<br>
<input type="text" id="MouseY" value="0" size="4"> Y<br>
<input type="text" id="search" onclick="search(this)" />
Just make an input type="image" of a magnifying glass and z-index it above, position: absolute, and then move it over with margins.
This might seem a little overkill but it works in my application.
Here's my solution:
;(function($) {
$.fn.inputButton= function() {
return this.each(function() {
$input = $(this);
$input
.css({"padding":"0 25px 0 0"})
.after("<a style=\"margin:0 0 0 -20px;\" href=\"#\">btn</a>")
;
});
};})(jQuery);
then call it like any other plugin:
<script type="text/javascript">$('.link').inputButton();</script>
<input class="link" />
From here you can easily hook into the anchor click event or simply change it to a submit button
Just another way:
function checkIcon(event){
var e = event || window.event;
var o = e.target;
// Calculate 15% of input width
var d=e.currentTarget.offsetWidth-e.currentTarget.offsetWidth*0.15;
var info='';
// If click on input_width minus 15%
if(e.clientX>=d)
info='CLICKED !!';
document.getElementById('info').innerHTML=info;
}label {
position: relative;
}
label:before {
content: "";
position: absolute;
right: 10px;
top: 0;
bottom: 0;
width: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
input {
padding: 5px 5px;
}<label>
<input type="text" placeholder="Search" onclick="checkIcon()">
</label>
<br><br>
<span id="info"></span>