CSS 伪类 placeholder-shown

MDN: :placeholder-shown - CSS：层叠样式表 | MDN

:placeholder-shown伪类表示仅显示输入占位符(placeholder)内容时的伪类，也就表示此时的Input输入的内容为空

/* 此时 Input 只显示了 placeholder，说明还没有输入内容 */
input:placeholder-shown {
}

基于此可以使用 :not伪类来判断当前Input 是否已经有了输入值

/* 表示当用户输入了值的时的伪类 */
input:not(:placeholder-shown) {}

使用 :placeholder-shown 与 :not 组合来实现当用户输入内容时，展示清除按钮

<script lang="ts">
</script>
 
<main>
  <input type="text" placeholder="placehplder">
  <div class="status">
    <div class="not-value">没有值</div>
    <div class="has-value">有值</div>
    <button class="clear">clear</button>
  </div>
</main>
 
<style>
  .clear {
    display: none;
  }
 
  /* 当Input没有输入值时 */
  input:placeholder-shown + .status > .not-value {
    color: red;
  }
 
  /* 当Input输入值时 */
  input:not(:placeholder-shown) + .status > .has-value {
    color: red;
  }
 
  /* 当有输入值时展示清除按钮 */
  input:not(:placeholder-shown) + .status > .clear {
    display: block;
  }
</style>

预览