Question

附加标记和CSS。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

1 个答案: