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

删除填充或边距"占位符"；。并添加输入标签。像这个

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

Answer 2

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

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

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

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