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.

user_735284 · Answer

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

Add a handler for the icon to cause a submit action to occur as desired, this is beyond the scope of this question though...

user_1341692 · Answer

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;
}

Clickable icon inside input field

6 Answers

2017 update CSS3 HTML5 (and optionally bootstrap)