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: 5px;
}