Styling cursor in text input with CSS

Question

I am designing form for search bar

Here is HTML

<form class="search-form" action="index_submit" method="get" accept-charset="utf-8">
  <input type="search" name="search" placeholder="Search here...">
  <button type="submit"><i class="fa fa-search"></i></button>
  <div class="clearfix"></div>
</form>

And here is my CSS

.search {
   position: static;
}

.search-box {
   position: absolute;
   top: 50%;
   left: 50%;
}

.search-form input[type="search"] , .search-form button {
   outline: none;
   border: none;
   padding: 10px;
   margin: 0;
   float: left;
   color: black;
}

.search-form input {
   background-color: yellow;
}

.search-form button {
   text-align: center;
}

I have fallen in the problem with the cursor blinking in that text field. I want that cursor align in exactly middle vertically. I have given padding but its not working.I want CSS to customize that cursor. Thanks.

Answer 1

Try adding "text-align: center" to your searchbar input style. I'm not sure if you mean you want it so the cursor doesn't show? If that is what you mean take a look at this link.

Hide textfield blinking cursor

Answer 2

I have found the exact solution. I was using bootstrap 3 , and in that I found below CSS

input, button, select, textarea {

   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
}

So the problem is in line-height: inherit; . Because it was inheriting the line-height of parent container , the cursor was positioned above center.

I just changed my CSS by adding line-height: initial;