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

flash 发表于 Dev

闪

我正在一个网站（内置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中进行哪些更改，以便可以将闪烁的光标稍微向右移动，以使该图标完全可见。

此时，闪烁的光标已全部显示在图标上，如屏幕截图所示：

白帽

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

我已经编辑了代码。但是，您需要做的就是添加

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。