Question

我正在研究HTML表单的材料设计。我不想required输入文本。但是，只有输入具有required attribute时，我的材料设计才有效。我试图将css从:valid更改为:not(:focus)，:invalid，:optional，但没有用。

问题： 如果我在输入字段中输入，则标签会移到顶部，当我离开输入字段时输入一些内容后，标签会回到其初始位置。输入后，我不希望标签回到其原始位置。标签应仅在键入后才显示在顶部。

这是我的表单：

.form-row {
  position: relative;
  margin-top: 30px;
}

.form-label {
  position: absolute;
  top: 17px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
  -webkit-transition: all .15s ease-in-out 0s;
  -moz-transition: all .15s ease-in-out 0s;
  -ms-transition: all .15s ease-in-out 0s;
  -o-transition: all .15s ease-in-out 0s;
}

.form-textbox,
.form-submit {
  width: 100%;
  padding: 20px;
}

.form-textbox:focus~.form-label,
.form-label:after {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}

<div class="form-row">
  <input type="text" id="form-email" class="form-textbox">
  <label for="form-email" class="form-label">Testing</label>
</div>

任何帮助将不胜感激。预先谢谢你。

Answer 1

您可以编写一些自定义javascript以获得预期的功能。 @Khushbu Vaghela，我已经根据您的需要更新了一些CSS和javascript

function hideLabel(){
  txtEmail =  document.getElementById('form-email')
  lblEmail =  document.getElementsByClassName('form-label')[0]
  if(txtEmail.value != ''){
    lblEmail.classList.add("form-label-content");
  } else {
    lblEmail.classList.remove("form-label-content");
    lblEmail.innerText = 'Testing';
  }
}

.form-row {
      position: relative;
      margin-top: 30px;
    }

    .form-label {
      position: absolute;
      top: 17px;
      left: 20px;
      color: #999;
      cursor: text;
      transition: all .15s ease-in-out 0s;
    }
    .form-textbox,
    .form-submit {
      width: 100%;
      padding: 20px;
    }

 
    .form-textbox:focus ~ .form-label {
      top: 10px;
      left:12px;
      font-size: 10px;
      color: inherit;
      cursor: pointer;
    }
    
    .form-textbox:not(:focus) ~ .form-label-content {
      top: 10px;
      left:12px;
      font-size: 10px;
      color: inherit;
      cursor: pointer;
    }

<div class="form-row">
      <input type="text" id="form-email" onFocusOut="hideLabel()" class="form-textbox">
      <label for="form-email" class="form-label">Testing</label>
</div>

Answer 2

就像Siddaram H一样，您可以使用一个简单的js函数来实现。但是，如果您希望它始终可见，请像.form-textbox:focus

这样的类转换.edited

if (txtEmail.value != '') {
  lblEmail = document.getElementsByClassName('form-label')[0]
  lblEmail.classList.add('edited');
}

.edited {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}

Answer 3

~~您可以使用:valid-伪类检查输入字段是否包含文本。~~

编辑：对不起，我只是仔细阅读了您的问题

.form-row {
  position: relative;
  margin-top: 30px;
}

.form-label {
  position: absolute;
  top: 17px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
}

.form-textbox,
.form-submit {
  width: 100%;
  padding: 20px;
}

.form-textbox:focus~.form-label,
.form-textbox:valid~.form-label,
.form-label:after {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}

<div class="form-row">
  <input type="text" id="form-email" class="form-textbox" required>
  <label for="form-email" class="form-label">Testing</label>
</div>

使用纯CSS做到这一点的另一种方法是使用:placeholder-shown-pseudoclass。不幸的是，这根本无法在IE或Edge中使用。

.form-row {
  position: relative;
  margin-top: 30px;
}

.form-label {
  position: absolute;
  top: 17px;
  left: 20px;
  color: #999;
  cursor: text;
  transition: all .15s ease-in-out 0s;
}

.form-textbox,
.form-submit {
  width: 100%;
  padding: 20px;
}

.form-textbox:focus~.form-label,
.form-textbox:not(:placeholder-shown)~.form-label,
.form-label:after {
  top: 10px;
  left: 12px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}

<div class="form-row">
  <input type="text" id="form-email" class="form-textbox" placeholder=" ">
  <label for="form-email" class="form-label">Testing</label>
</div>

材料设计表格错误

3 个答案: