html - 如何在CSS中移动闪烁的光标？

Question

我正在研究 website (内置 HTML/CSS)，我想将闪烁的光标向右移动，使其不在图标的顶部。

我用来制作搜索图标的 HTML 和 CSS 片段是:

.searchicon {
  position: absolute;
  left: 34.5%;
  top: 22.4%;
  transform: translateY(-50%);
  color: red;
  pointer-events: none;
}

<div class="input-searchicon">
  <input class="form-control search_radius mb-4" type="text">
  <span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>

问题陈述:

我想知道我应该在 HTML/CSS 中进行哪些更改，以便我可以将闪烁的光标稍微向右移动，使图标完全可见。

此时，如屏幕截图所示，闪烁的光标遍布图标:

Answer 1

在输入元素上使用填充来调整闪烁光标的位置。

我已经编辑了代码。但在你的情况下，你需要做的就是添加

.input-searchicon input{
  padding-left: 35px;
}

这样就可以了。通过增加或减少填充来调整位置。

.input-searchicon{
  position: relative;
}
.input-searchicon input{
  padding-left: 35px;
}
.searchicon {
    position: absolute;
    left: 5px;
    top: 10px;
    transform: translateY(-50%);
    color: red;
    pointer-events: none;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-searchicon">
        <input class="form-control search_radius mb-4" type="text">
        <span class="fa fa-search searchicon" aria-hidden="true "></span>
 </div>