CSS 输入的样式占位符似乎不起作用

Question

我是 CSS 的新手，我想为输入的占位符添加一些边距：

<div class="input-group">
   <input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>

这是我设置右边距的尝试：

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

但不知何故并没有做出任何改变！

那么如何在 CSS 中正确地更改和设置输入占位符的样式？

Answer 1

你做不到。你的结构应该是这样的：

<label>
   <input type="text" class="form-control">
   <span class="placeholder">Search this blog</span>
</label>

然后您可以处理您的标签文本：

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

Answer 2

试试这个：

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

Answer 3

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

<div class="input-group">
   <input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>

Answer 4

从“占位符”中删除填充或边距。并添加 input 标签。像这样

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

}

<div class="input-group">
   <input type="text" class="form-control search-engine" placeholder="Search this blog">
</div>

CSS Styling Placeholder of Input Does Not Seem To Be Working