CSS Styling Placeholder of Input Does Not Seem To Be Working-CodePudding

I'm new to CSS and I wanted to add some margin-right to the placeholder of an input:

<div >
   <input type="text"  placeholder="Search this blog">
</div>

And this was my try on setting margin-right:

.search-engine ::placeholder{
     margin-right:5px !important;
     padding-right:5px !important;
}

But it didn't make any changes somehow!

So how to properly make changes and style the placeholder of an input in CSS?

CodePudding user response：

Remove Padding or Margin From "Placeholder". and add in the input tag. like this

.input-group input{
  padding:10px 20px;
}
.search-engine::placeholder{

}

<div >
   <input type="text"  placeholder="Search this blog">
</div>

CodePudding user response：

you can't do it. Your structure should be like this:

<label>
   <input type="text" >
   <span >Search this blog</span>
</label>

then you can process your label text:

label {
    padding: 10px;
    position: relative;
}
.placeholder {
    position: absolute;
    left: 0;
    top: 0;
}

CodePudding user response：

Try this:

.form-control::placeholder{
    padding-left: 5px;
}

CodePudding user response：

.form-control::placeholder{
    padding-left: 15px;
}

<div >
   <input type="text"  placeholder="Search this blog">
</div>