代码之家 › 专栏 › 技术社区 › Khushbu Vaghela

材料设计形式错误

material-design forms css html

Khushbu Vaghela · 技术社区 · 6 年前

我在从事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>

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

3 回复 | 直到 6 年前

SapuSeven 6 年前

~~: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>

:placeholder-shown

.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>

Ben Thomas 6 年前

就像siddaramh-say一样,您可以用一个简单的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;
}

Siddaram H 6 年前

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>