css - 如何更改输入占位符的位置

Question

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

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

.filter::placeholder {
   color: gray;
}

<input type="text" class="filter">

有没有办法做到这一点？

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

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