标签过渡问题 [英] Label transition issue

问题描述

我是新的html，css和我得到错误，当用户输入无效的输入到输入框，然后特定输入字段的标签下降，但是当用户输入
正确的输入，然后它的工作正常。 >

I am New in html,css and I am getting error when user enter invalid input into the input box then label of particular input field goes down but when user enter correct input then its work fine.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
    <form id="form">
    <div class="group">
    <input type="text" required id="name" minlength="4">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label class="labeling">Name</label>
    </div>
    <div class="group">
    <input type="email" required id="email">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label class="labeling">Email</label>
    </div>
    </form>

我尝试过 this

<form id="form">
<div class="group">      
<input type="text" required id="name" minlength="4">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Name</label>
</div>
<div class="group">      
<input type="email" required id="email">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Email</label>
</div>
</form>
.group {
margin-top: 40px;
position: relative;
margin-bottom: 45px;
}
input {
font-size: 22px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label.labeling {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
}
input:focus ~ label.labeling,
input:valid ~ label.labeling {
top: -20px;
font-size: 14px;
color: #5264AE;
}
.bar {
position: relative;
display: block;
width: 309px;
}
.bar:before,
.bar:after {
content: '';
height: 1px;
width: 0;
bottom: 1px;
position: absolute;
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset; 
}
$(document).ready(function() {
$("#form").validate({
rules: {
name: {
required: true
},
email: {
required: true
}
},
messages: {
minlength: "your name at least 4 characters long",
email: "Please enter a valid email address"
}
});
});

推荐答案

对于输入框没有：empty css属性（使用：无效将意味着您的占位符设置将无法工作！ ）

You have to use some JS too to here as there is no :empty css property for an input box.(using :invalid will mean your placeholder setup will not work!)

查看此小提琴，并让我知道您的反馈。谢谢！

Check out this fiddle and let me know your feedback. Thanks!

使用此css：

input.invalid-input ~ label.labeling {
  top: -20px;
  font-size: 14px;
  color: red;
}

并添加了一些js：

  $("input").each(function() {
    var $this = $(this);
    $this.on("change", function() {
      if ($(this).is(':invalid') && $(this).val() != "") {
        $(this).addClass("invalid-input");
      } else {
        $(this).removeClass("invalid-input");
      }
    });
  });

这篇关于标签过渡问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！