Clickable icon inside input field

Question

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.

Answer 1

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> 

Answer 2

2017 update CSS3 HTML5 (and optionally bootstrap)

jsfiddle

jsfiddle with tick box

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...