如何移动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 元素（即搜索图标）的 [=17=]，不如尝试更改 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 以查看示例输出。

如何移动css中闪烁的光标？

How to move the blinking cursor in css?

html

css

cursor