将搜索图标放在输入的前面，而不更改现有样式

Question

有附加的标记和css。

我想将搜索图标放在输入的前面，而不改变输入的 100% 宽度。

我想使用绝对定位，但是当用户将焦点放在输入上时，光标将位于图像上。

有没有办法解决这个问题？

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>

Answer 1

考虑label，以便在单击图标时能够获得焦点，并向输入添加更多左侧填充以覆盖图标的空间。不要忘记box-sizing:border-box，以避免在设置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>

另一种解决方案是将 SVG 视为输入的背景：

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>