如果输入有值，CSS会改变样式答案

【问题标题】：CSS change style if input has value or not如果输入有值，CSS会改变样式
【发布时间】：2020-02-07 19:18:14
【问题描述】：

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

.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 选择器一定有问题，但我不知道。

【问题讨论】：

Detect if an input has text in it using CSS -- on a page I am visiting and do not control?的可能重复

标签： html css

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

【讨论】：

啊，我检查了值，但应该没有值 - input:not([value]) 怎么样来避免这个占位符属性？
@Dr.Snail 这不起作用，在 CSS 级别你不知道它是否有值。您只能知道是否指定了 value 属性。此选择器不会选择具有 value 属性的输入。

【解决方案2】：

您将无法使用 value 属性捕捉到这一点，因为它只会在页面加载时应用该值。您可以使用占位符显示为 Temani Afif 回答，或者如果您也想支持边缘，您可以在必填字段上使用 :valid 选择器

.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:valid~.placeholder {
  top: -1px;
  font-size: 11px;
}

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

【讨论】：

感谢边缘支持，这应该是最好的方法。