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

Question

我正在开发一个使用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中做哪些修改，以便将闪烁的光标轻微地向右移动，使图标完全可见。

目前，如屏幕截图所示，闪烁的光标覆盖了整个图标：

- flash

---

这是一个 jQuery 自定义光标的链接：https://github.com/apm1467/jQuery.Custom-Caret/blob/master/demo.gif - DCR

Answer 1

使用padding属性调整输入框中闪烁光标的位置。

我已经编辑了代码。但在您的情况下，您只需要添加

即可。

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

- Sreekanth Reddy Balne

---

请仅添加以下内容，不要添加其他任何内容：.input-searchicon input{padding-left: 35px;}。剩余的代码只是为了展示。这里有一个很好的教程，解释了position: relative。https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ - Sreekanth Reddy Balne

好的，听起来不错。我认为我们需要添加position:relative，因为我们正在将.searchicon设置为position:absolute。据我所知，我们使用position:relative来为父元素.input-searchicon设置样式，而使用position:absolute来为子元素.searchicon设置样式。 这是我们遵循的基本规则，我说得对吗？ - flash

这就是我在代码中展示的内容。概念很简单。当你为一个元素添加position: absolute时，你就能够将它相对于带有position: relative的祖先元素定位。因此，在这里我们将.searchicon相对于其父元素.input-searchicon进行定位。 - Sreekanth Reddy Balne

您需要创建一个具有position: absolute的.calendar元素，并通过将position: relative分配给其父元素.calendar-parent来根据您的要求放置它。在日历图标上添加click事件监听器。无论如何，评论不适合您所需的内容。如果您在相关问题上发布另一个问题，我很乐意提供帮助。 - Sreekanth Reddy Balne

好的。我刚刚发布了它。不知道你能否看一下。 - flash

Answer 2

不要更改 span 元素（即搜索图标）的 css，而是尝试更改输入元素内部的样式。假设您正在使用 Bootstrap，则可以添加 pl-1 来调整左填充；

 <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链接，查看示例输出。

- Alvin Ching

---

请重新检查。您在fiddle中还没有解决问题。 - Sreekanth Reddy Balne