如何在不使用JS/jQuery的情况下让占位符消失？

<style>
  .input-container {
    position: relative;
    display: inline-block;
  }
  
  .input-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }
  
  .input-container label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    transition: all 0.3s ease;
  }
  
  .input-container input:focus + label {
    opacity: 0;
  }
  
  .input-container input:valid + label {
    opacity: 0;
  }
</style>

<div class="input-container">
  <input type="text" id="myInput" required>
  <label for="myInput">请输入内容</label>
</div>