Question

如果输入标签中有必要，标签效果将起作用。但是，如果我删除所需的属性Click to see working fiddle，效果将无效对此有什么解决方案吗？

HTML

<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>

段：

.module-input {
  font-size: 14px;
  padding-top: 12px;
  display: block;
  width: 97%;
  border: none;
  border-bottom: 1px solid #94a3a9;
  background-color: transparent;
  color: #5a686d;
  margin-bottom: 2%;
}

input:focus {
  outline: none;
}

.group {
  position: relative;
  margin-bottom: 25px;
}


/* LABEL */

label {
  color: #94a3a9;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0.5%;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}


/* active state */

input:focus+label,
input:valid+label {
  top: -8px;
  font-size: 12px;
  color: #94a3a9;
}

<div class="group ">
  <input type="text" class="module-input" />
  <label>Name</label>
</div>

Answer 1

如果您使用属性选择器input[required]:valid ~ label更新规则，则无论是否有required属性

都可以使用它

如果input没有reqiured属性，则会被视为有效，因此规则会立即生效。

更新

为了能够正确处理这个问题，因为:empty不能在input元素上运行，我添加了一个小脚本和一个属性选择器，它根据更改设置，然后是CSS规则检查它是否为空

window.addEventListener('load', function() {
  var inp = document.querySelectorAll('input');
  for (var i = 0; i < inp.length; i++) {
    inp[i].addEventListener('change', function() {
      this.setAttribute("data-value", this.value);
    })
  }
})

.module-input {
  font-size: 14px;
  padding-top: 12px;
  display: block;
  width: 97%;
  border: none;
  border-bottom: 1px solid #94a3a9;
  background-color: transparent;
  color: #5a686d;
  margin-bottom: 2%;
}

input:focus {
  outline: none;
}

.group {
  position: relative;
  margin-bottom: 25px;
}


/* LABEL */

label {
  color: #94a3a9;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 0.5%;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}


/* active state */

input[data-value]:not([data-value=""]) ~ label,
input:focus ~ label {
  top: -8px;
  font-size: 12px;
  color: #94a3a9;
}

<div class="group ">
  <input type="text" class="module-input" required="" />
  <label>Name</label>
</div>
<div class="group ">
  <input type="text" class="module-input" />
  <label>Address</label>
</div>

Answer 2

您的CSS为input:valid ~ label这意味着：如果输入有效，请将标签置于顶部。

删除required属性后，输入默认有效。因此，如果没有required属性，标签效果默认不起作用。

您应该使用input[required]:valid ~ label

之类的内容

Answer 3

如果您不需要，则使用css中的input:valid ~ label属性，因为您的输入不是必需的，因此它是有效的

Answer 4

只需从有效

中移除波浪号〜符号即可

input:focus~label,
input:valid label {
top: -8px;
font-size: 12px;
color: #94a3a9;
}

在此之后使用必需或不重要。

如果需要删除CSS输入效果不起作用

4 个答案: