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

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">
   <input class="form-control search_radius mb-4 pl-4" type="text">
   <span class="fa fa-search searchicon" aria-hidden="true "></span>
 </div>

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