输入带有移位标签字段（在所有CSS中），不需要

Question

我对所有CSS进行样式输入都有一个浮动标签。 我遇到的问题是，这需要输入具有required属性才能管理移动标签（使用纯CSS）。 我想知道是否可以在没有required字段的情况下执行此操作，因为将其以某些形式放置会干扰表单验证。 我的标记和CSS看起来像这样：

.myInput {
  position: relative;
  input {
    padding: 30px 10px 10px;
    display: block;
    width: 100%;
    border: 1px solid black;
    &:focus {
      outline: none;
    }
    &:focus~label,
    &:valid~label,
    &:placeholder-shown~label {
      top: 10px;
      color: black;
    }
  }
  label {
    color: red;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 20px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }
}



<div class="myInput">
  <input type="text" required id="target" />
  <label htmlFor="target">
        label
    </label>
</div>

您会注意到，如果删除了required的标签，则标签将不再移入空输入中的占位符位置。 这是在工作的小提琴-https: //jsfiddle.net/1ob2npcu/2/

我试图查看是否有一种方法可以完全在CSS中执行此操作-如果有帮助，我正在使用SCSS。 谢谢！

Answer 1

如果删除required属性，则也删除

&:valid~label

从CSS ：那么您需要为输入定义一个占位符，并还原placeholder-shown伪类的逻辑，因此input的SCSS样式变为

input {
    padding: 30px 10px 10px;
    display: block;
    width: 100%;
    border: 1px solid black;

    &::placeholder { 
       color: transparent;
    }

    &:focus {
        outline: none;
    }

    &:focus ~ label,
    &:not(:placeholder-shown) ~ label{
        top: 10px;
        color: black;
    }

}

同样，标签中的属性是for （不是htmlfor ）

jsfiddle上的分叉