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

Question

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

因此，在代码片段中，您可以看到，如果您作为用户输入了一个有效 电子邮件，标签将保持其转换后的位置，即使您在输入字段外单击也是如此。

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

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

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

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

希望这会起作用:

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