How To Move The Blinking Cursor In Css?

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

Solution 1:

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-searchiconinput{
  padding-left: 35px;
}

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

.input-searchicon{
  position: relative;
}
.input-searchiconinput{
  padding-left: 35px;
}
.searchicon {
    position: absolute;
    left: 5px;
    top: 10px;
    transform: translateY(-50%);
    color: red;
    pointer-events: none;
}

<linkhref="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><divclass="input-searchicon"><inputclass="form-control search_radius mb-4"type="text"><spanclass="fa fa-search searchicon"aria-hidden="true "></span></div>

Solution 2:

Instead of changing the css of the span element (which is the Search Icon), try to change the style within the input element. Assuming you're using Bootstrap, you could add pl-1 to adjust the padding-left;

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

You could visit this Jsfiddle here to see what the sample output.