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）

fork on jsfiddle

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

1 个答案: