Html 使用移位标签字段输入（在所有CSS中），无需输入

我有一个浮动标签，用于所有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>

.myInput{
位置：相对位置；
输入{
填充：30px 10px 10px；
显示：块；
宽度：100%；
边框：1px纯黑；
&：焦点{
大纲：无；
}
&：focus~标签，
&：valid~标签，
&：显示占位符~标签{
顶部：10px；
颜色：黑色；
}
}
标签{
颜色：红色；
位置：绝对位置；
指针事件：无；
左：10px；
顶部：20px；
过渡：0.2s缓解所有；
-moz过渡：0.2s缓解所有；
-webkit过渡：0.2s轻松全部；
}
}
标签

您会注意到，如果删除

required

，标签将不再移动到空输入中的占位符位置。这是一把小提琴-

---

我试图看看是否有一种方法可以完全在CSS中实现这一点——如果这有帮助的话，我正在使用SCSS。谢谢

如果删除

required

属性，则同时删除

&:valid~label

从

CSS

：然后您需要为输入定义一个占位符，并还原显示的

占位符的逻辑

伪类，这样

输入的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;
    }

}

此外，标签中的属性是
表示
（而不是
htmlfor
）