输入有效时添加 CSS - CSS Challenge

Question

上下文：我在 netsuite 中工作，它在其输入周围添加跨度，因此我不能使用引导程序浮动标签，因为它针对调用它的 div 之后的直接子输入。

我的目标：当输入聚焦时，浮动标签内的文本会浮动，但是当我在字段内输入内容时，它会下降。当我当前未点击该字段时，我需要保持应用样式。

    <div class="col-md-3">
    <div class="custom_floating mb-3">
        <span>
            <input type="text" class="" id="firstname" placeholder=""> 
        </span>
        <label for="floatingFirstName" class="form-control-placeholder">
            First Name <span style="color: red;">*</span>
        </label>
    </div>
</div>

CSS：

    .custom_floating > span:focus-within + label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}  

感谢任何答案。

Answer 1

input:not(:placeholder-shown) + label{
  color:red;
}
input:placeholder-shown + label{
  border-color: black;
}

 <div class="col-md-3">
    <div class="custom_floating mb-3">
        <span>
            <input type="text" class="" id="firstname" placeholder="name"> 
       
        <label for="floatingFirstName" class="form-control-placeholder">
            First Name <span style="color: red;">*</span>
        </label>
           </span>
    </div>
</div>

输入应该有占位符