如何在CSS中移动闪烁的光标? [英] How to move the blinking cursor in css?

问题描述

我正在一个

解决方案

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

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

  .input-searchicon输入{padding-left:35px；} 

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

  .input-searchicon {职位:相对}.input-searchicon输入{padding-left:35px；}.searchicon {位置:绝对；左:5px；顶部:10px；转换:translateY(-50％);红色;指针事件:无；}  

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

I am working on a website (built in HTML/CSS) in which I want to move the blinking cursor towards the right so that its not on the top of icon.

The snippets of HTML and CSS which I have used in order to make a search icon is:

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

Problem Statement:

I am wondering what changes I should make in the HTML/CSS so that I can move the blinking cursor slight towards the right so that the icon is full visible.

At this moment, the blinking cursor is all over icon as seen in the screenshot:

解决方案

Use padding on the input element to adjust the position of the blinking cursor.

I have edited the code. But in your case all you need to do is add

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

That will do it. Adjust the position either by increasing or decreasing the padding.

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

这篇关于如何在CSS中移动闪烁的光标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！