html - 如果输入有值，CSS 会改变样式

Question

我有一个带有占位符的输入元素，它应该总是出现

.wrapper {
  position: relative;
}

input {
  font-size: 14px;
  height: 40px;
}

.placeholder {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  left: 1px;
  top: 2px;
  transition: 0.1s ease all;
}

input:focus~.placeholder {
  top: -1px;
  font-size: 11px;
}

input[value=""]~.placeholder {
  top: -1px;
  font-size: 11px;
}

<div class="wrapper">
  <input type="text">
  <span class="placeholder">E-Mail</span>
</div>

如果输入字段中有任何文本，我希望伪占位符保持较小。 input[value=""] ~ .placeholder 选择器一定有问题，但我不知道。

Answer 1

使用:placeholder-shown但你至少需要有一个空的占位符

.wrapper{
  position: relative;
}

input {
  font-size: 14px;
  height: 40px;
}

.placeholder {
  position: absolute;
  font-size:16px;
  pointer-events: none;
  left: 1px;
  top: 2px;
  transition: 0.1s ease all;
}

input:focus ~ .placeholder{
  top: -1px;
  font-size: 11px;
}

input:not(:placeholder-shown) ~ .placeholder{
  top: -1px;
  font-size: 11px;
}

<div class="wrapper">
  <input type="text" placeholder=" ">
  <span class="placeholder">E-Mail</span>
</div>