All geek questions in one place

Input and pattern float

I have a problem with the input tag and its float inscription. Everything works correctly, but when I insert a template into the input, if this template is not satisfied with the float effect, it is not implemented, and the text input overlaps with the label. I hope I was clean, I apologize for my English.

this is css

.card .input-container { position: relative; margin: 0 60px 50px; } .card .input-container input { outline: none; z-index: 1; position: relative; background: none; width: 100%; height: 60px; border: 0; color: #212121; font-size: 24px; font-weight: 400; } .card .input-container input:focus ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { width: 50%; } .card .input-container input:valid ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container label { position: absolute; top: 0; left: 0; color: #757575; font-size: 24px; font-weight: 300; line-height: 60px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .card .input-container .bar { position: absolute; left: 0; bottom: 0; background: #757575; width: 100%; height: 1px; } .card .input-container .bar:before, .card .input-container .bar:after { content: ''; position: absolute; background: #ed2553; width: 0; height: 2px; -webkit-transition: .2s ease; transition: .2s ease; } .card .input-container .bar:before { left: 50%; } .card .input-container .bar:after { right: 50%; } 
 <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required" pattern=".{3,}" title="3 characters minimum" /> <label for="Username">Username</label> <div class="bar"></div> </div> </form> </div>
+5
source share
1 answer

I would suggest this if you want to keep the animation intact. Validation of the input must be done using JavaScript and input is simply required . Remove the pattern as a whole and produce something like this:

 .card .input-container { position: relative; margin: 0 60px 50px; } .card .input-container input { outline: none; z-index: 1; position: relative; background: none; width: 100%; height: 60px; border: 0; color: #212121; font-size: 24px; font-weight: 400; } .card .input-container input:focus ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { width: 50%; } .card .input-container input:valid ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container label { position: absolute; top: 0; left: 0; color: #757575; font-size: 24px; font-weight: 300; line-height: 60px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .card .input-container .bar { position: absolute; left: 0; bottom: 0; background: #757575; width: 100%; height: 1px; } .card .input-container .bar:before, .card .input-container .bar:after { content: ''; position: absolute; background: #ed2553; width: 0; height: 2px; -webkit-transition: .2s ease; transition: .2s ease; } .card .input-container .bar:before { left: 50%; } .card .input-container .bar:after { right: 50%; } 
 <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required" title="3 characters minimum" /> <label for="Username">Username</label> <div class="bar"></div> </div> </form> </div>

Or you can make an animation by adding a new class to input using JavaScript / jQuery . A clean CSS solution for both may not be possible. I said, I can’t, because, I can’t think of one thing. See if anyone else comes up with a solution.

Alternative solution using jQuery:

 $(function () { $("input").keyup(function () { if ($(this).val().trim().length > 0) $(this).addClass("non-empty"); else $(this).removeClass("non-empty"); }); }); 
 .card .input-container { position: relative; margin: 0 60px 50px; } .card .input-container input { outline: none; z-index: 1; position: relative; background: none; width: 100%; height: 60px; border: 0; color: #212121; font-size: 24px; font-weight: 400; } .card .input-container input:focus ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { width: 50%; } .card .input-container input.non-empty ~ label { color: #9d9d9d; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); } .card .input-container label { position: absolute; top: 0; left: 0; color: #757575; font-size: 24px; font-weight: 300; line-height: 60px; -webkit-transition: 0.2s ease; transition: 0.2s ease; } .card .input-container .bar { position: absolute; left: 0; bottom: 0; background: #757575; width: 100%; height: 1px; } .card .input-container .bar:before, .card .input-container .bar:after { content: ''; position: absolute; background: #ed2553; width: 0; height: 2px; -webkit-transition: .2s ease; transition: .2s ease; } .card .input-container .bar:before { left: 50%; } .card .input-container .bar:after { right: 50%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required" pattern=".{3,}" title="3 characters minimum" /> <label for="Username">Username</label> <div class="bar"></div> </div> </form> </div>
+5
source

Source: https://habr.com/ru/post/1239790/

More articles:


All Articles