在不改变现有样式的情况下将搜索图标放在输入的前面[重复]

Posted 2023-03-15

【中文标题】在不改变现有样式的情况下将搜索图标放在输入的前面[重复]

【英文标题】：place search icon to the front of an input without altering existing styles [duplicate]

【发布时间】：2018-11-26 13:40:33

【问题描述】：

附上标记和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>

【参考方案1】：

考虑label 在单击图标时能够获得焦点，并在输入左侧添加更多填充以覆盖图标的空间。设置width:100%时不要忘记box-sizing:border-box避免溢出。

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>