如何在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>

Answer 2

而不是更改span元素的css（即搜索图标），而是尝试更改input元素内的样式。假设您使用的是Bootstrap，则可以添加pl-1来调整padding-left;

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

您可以在此处访问此Jsfiddle来查看示例输出。