place search icon to the front of an input without altering existing styles

Question

Have the attached markup and css.

I want to place the search icon to the front of the input without altering the 100% width of the input.

I would like to use absolute positioning but then when the user places the focus on the input the cursor will be over the image.

Is there a way round this?

form-control__input {
  margin-bottom: 8px !important;
}

.form-control__wrapper {
  position: relative;
}

.input__default {
  border: 1px solid #727272;
  background: #fff;
  width: 100%;
  padding: 6px 12px;
}

<div class="form-group form-control__input">
  <div class="form-control__wrapper"><svg viewBox="0 0 16 16" class="ng-element" data-id="d1ec30cc21c0cdbdc697b4afd1ce6469" overflow="visible" filter="none" style="mix-blend-mode: normal; width: 16px; height: 16px;"><path d="M15.566 13.68l-3.467-3.466c-.018-.019-.04-.032-.059-.049a6.56 6.56 0 1 0-1.875 1.875c.017.02.03.04.048.06l3.467 3.466a1.334 1.334 0 0 0 1.886-1.886zM6.56 10.846a4.286 4.286 0 1 1 0-8.572 4.286 4.286 0 0 1 0 8.572z" vector-effect="non-scaling-stroke" fill="#AEAEAE" fill-rule="nonzero"></path></svg>
    <input autocomplete="off" class="input__default form-control" id="ctrl1" aria-describedby="ctrl1-error" type="text"></div>
</div>

Temani Afif · Accepted Answer · 2018-06-17T13:34:20.337

Consider label to be able to have the focus when clicking the icon and add more padding left to the input to cover the space of the icon. Don't forget box-sizing:border-box to avoid having overflow when setting width:100%.

form-control__input {
  margin-bottom: 8px !important;
}

.form-control__wrapper {
  position: relative;
}
svg {
  position:absolute;
  top:5px;
  left:5px;
}

.input__default {
  border: 1px solid #727272;
  background: #fff;
  width: 100%;
  padding: 6px 12px 6px 25px;
  box-sizing:border-box;
}

body {
 margin:0;
}

<div class="form-group form-control__input">
  <div class="form-control__wrapper">
  <label><svg viewBox="0 0 16 16" class="ng-element" data-id="d1ec30cc21c0cdbdc697b4afd1ce6469" overflow="visible" filter="none" style="mix-blend-mode: normal; width: 16px; height: 16px;"><path d="M15.566 13.68l-3.467-3.466c-.018-.019-.04-.032-.059-.049a6.56 6.56 0 1 0-1.875 1.875c.017.02.03.04.048.06l3.467 3.466a1.334 1.334 0 0 0 1.886-1.886zM6.56 10.846a4.286 4.286 0 1 1 0-8.572 4.286 4.286 0 0 1 0 8.572z" vector-effect="non-scaling-stroke" fill="#AEAEAE" fill-rule="nonzero"></path></svg>
    <input autocomplete="off" class="input__default form-control" id="ctrl1" aria-describedby="ctrl1-error" type="text">
    </label></div>
</div>

Another solution is to consider the SVG as a background of the input:

form-control__input {
  margin-bottom: 8px !important;
}

.form-control__wrapper {
  position: relative;
}
svg {
  position:absolute;
  top:5px;
  left:5px;
}

.input__default {
  border: 1px solid #727272;
  width: 100%;
  padding: 6px 12px 6px 25px;
  box-sizing:border-box;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="mix-blend-mode: normal; width: 16px; height: 16px;"><path d="M15.566 13.68l-3.467-3.466c-.018-.019-.04-.032-.059-.049a6.56 6.56 0 1 0-1.875 1.875c.017.02.03.04.048.06l3.467 3.466a1.334 1.334 0 0 0 1.886-1.886zM6.56 10.846a4.286 4.286 0 1 1 0-8.572 4.286 4.286 0 0 1 0 8.572z" vector-effect="non-scaling-stroke" fill="#AEAEAE" fill-rule="nonzero"></path></svg>') 5px center/16px 16px no-repeat
  #fff;
}


body {
 margin:0;
}

<div class="form-group form-control__input">
  <div class="form-control__wrapper">
    <input autocomplete="off" class="input__default form-control" id="ctrl1" aria-describedby="ctrl1-error" type="text">
    </div>
</div>

place search icon to the front of an input without altering existing styles

1 Answers1