表单输入标签保持变换位置

Question

我的问题很简单，我试图在用户输入任何文本后将电子邮件input 字段的label 保持在其转换后的位置，而不仅仅是:valid 文本/电子邮件。

因此，在 sn-p 中，您可以看到如果您作为用户输入 有效 电子邮件，标签将保持其转换后的位置，即使您在输入字段之外单击。

这是检查有效输入并保持转换并按预期工作的 css

.contact-form .input-text:valid + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 20px;
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

问题 - 现在尝试在输入字段中输入随机文本，然后在输入字段外单击，您将看到标签回到其原始位置。

问题 - 如何根据输入字段中输入的任何文本将label 保持在其转换后的位置，并在输入字段外单击时保持label 位置。

希望这会奏效：

.contact-form div.email input[type=email] + .label {
  font-size: 14px;
  font-weight: 600;
  bottom: 20px;
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

我的代码

div.row {
  padding: 50px;
}

.contact-form .label {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 30px;
    line-height: 26px;
    font-weight: 600;
    color: #ccc;
    cursor: text;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 30px;
    padding: 30px 0px;
    border-width: 0 0 1px 0;
    border-color: #ccc;
    font-size: 36px;
    line-height: 26px;
    font-weight: 400;
}

.contact-form .form-field {
    position: relative;
    margin: 16px 0;
    width: 95%;
}

.contact-form .input-text:focus {
    outline: none;
}

.contact-form .input-text:focus + .label {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
}

.contact-form .input-text:valid + .label {
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row extra">
<div class="col-md-6">  
<form class="contact-form row extra">

  <div class="form-field email">
      <input id="email" class="input-text js-input" type="email" required>
  <label class="label" for="email">Your Email</label>
  </div>
  
  <div class="form-field colalign-center submit-form">
      <input class="submit-btn btn btn-custom pull-right" type="submit" value="Send">
  </div>
  
</form>
</div>
</div>

Answer 1

我通过将占位符添加到输入并通过不透明度隐藏它来解决它，当一些通过检查占位符是否未显示在输入中输入文本时，我持有标签的相同位置

::-webkit-input-placeholder {
   color: #666;
   opacity: 0;
}

:-moz-placeholder { /* Firefox 18- */
   color: #666;
   opacity: 0;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #666;
   opacity: 0;
}

:-ms-input-placeholder {
   color: #666;
   opacity: 0;
}

div.row {
  padding: 50px;
}

.contact-form .label {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 30px;
    line-height: 26px;
    font-weight: 600;
    color: #ccc;
    cursor: text;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 30px;
    padding: 30px 0px;
    border-width: 0 0 1px 0;
    border-color: #ccc;
    font-size: 36px;
    line-height: 26px;
    font-weight: 400;
}

.contact-form .form-field {
    position: relative;
    margin: 16px 0;
    width: 95%;
}

.contact-form .input-text:focus {
    outline: none;
}

.contact-form .input-text:focus + .label {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
}

.contact-form .input-text:not(:placeholder-shown) + label{
  -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
}

.contact-form .input-text:valid + .label {
    font-size: 14px;
    font-weight: 600;
    bottom: 20px;
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row extra">
<div class="col-md-6">  
<form class="contact-form row extra">

  <div class="form-field email">
      <input id="email" class="input-text js-input" type="email" placeholder="email" required>
  <label class="label" for="email">Your Email</label>
  </div>
  
  <div class="form-field colalign-center submit-form">
      <input class="submit-btn btn btn-custom pull-right" type="submit" value="Send">
  </div>
  
</form>
</div>
</div>