css - 如何更改输入占位符的位置[重复]答案

【问题标题】：css - how to change position of input placeholder [duplicate]css - 如何更改输入占位符的位置[重复]
【发布时间】：2018-01-15 10:19:05
【问题描述】：

我想在输入边框上放置输入占位符。

我设法改变颜色而不是位置。

.filter::placeholder {
   color: gray;
}

&lt;input type="text" class="filter"&gt;

有办法吗？

【问题讨论】：

看看这个希望对你有用stackoverflow.com/questions/42233488/…
css-tricks.com/float-labels-css, bradfrost.com/blog/post/float-label-pattern, adamsilver.io/articles/placeholders-are-problematic, medium.com/simple-human/…
快速谷歌搜索给你several tutorials、snippets和questions已经涵盖了这个：o)

标签： html css

【解决方案1】：

您不能通过设置::placeholder 的样式来做到这一点，它只支持有限数量的样式：https://css-tricks.com/almanac/selectors/p/placeholder/#article-header-id-4

您可以添加一个span，但是可以达到类似的效果。

.filter {
  position: relative;
  width: 195px;
  height: 30px;
  border-radius: 5px;
  outline: none;
  padding: 5px;
  border: 1px solid lightblue;
}

.placeholder {
  position: absolute;
  left: 20px;
  top: 0px;
  background-color: white;
  padding: 0 20px;
}

.filter:focus ~ .placeholder,
.filter:valid ~ .placeholder {
  display: none;
}

<input required type="text" class="filter" />
<span class="placeholder">First Name..</span>

【讨论】：

另外，<label> 更适合这个
不幸的是，现在的问题是当输入不在焦点上时它会重新出现，应该/可以使用required 属性和:valid 选择器来实现，如第一条评论的链接中所述对问题
@Alon Eitan 公平地说，似乎 OP 在输入边框顶部需要更多的简单标签，而不是占位符。标签用于“姓名”、“电子邮件”等，占位符用于“john doe”、“johndoe@somemail.com”等。由于他在示例中添加了“名字”，因此他似乎并不想要它完全消失。
嗯，我完全同意你的观点，最后的编辑绝对是一个有效的解决方案，所以请点赞。干得好

【解决方案2】：

在语义上更正确的方法是使用标签而不是跨度。

.group{
  position:relative;
}
.group>label{
  padding:0 0.2em;
  position:absolute;
  top:-0.5em;
  left:1em;
  background-color:white;
}

.group>input{
  padding:0.8em;
  border-radius: 0.5em;
  border: 2px solid lightblue;
  outline:none;
}

<form>
    <div class="group">
         <label>First name</label>
         <input type="text" class="">
    </div>
</form>

【讨论】：