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

【问题标题】：CSS Styling Placeholder of Input Does Not Seem To Be Working输入的 CSS 样式占位符似乎不起作用
【发布时间】：2022-01-26 07:46:26
【问题描述】：

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

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

这是我设置margin-right的尝试：

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

但它并没有做出任何改变！

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

<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;
}

【讨论】：