Strange behaviour required?

Good day!

There is a strange behavior which manifests itself in the presence/absence of required attribute in input.

Has code:




<meta charset="utf-8">
<title>Demo for Pure CSS Floating Labels For Text Fields</title>
<style>

body {
 background: #ecf0f1;
 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.page-wrap {
 max-width: 75rem;
 margin: 0 auto;
}

input:focus ~ label, input:valid ~ label {
 font-size: 0.75 em;
 color: #8e44ad;
 top: -1rem;
 -webkit-transition: all 0.125 s ease;
 transition: all 0.125 s ease;
}

.styled-input {
 float: left;
 width: 33.3333%;
 margin: 2rem 0 1rem;
 position: relative;
}

.styled-input label {
 color: #999;
 padding: 1rem;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transition: all 0.25 s ease;
 transition: all 0.25 s ease;
 pointer-events: none;
}

.styled-input.wide { width: 100%; }

input {
 padding: 1rem 1rem;
 border: 0;
 width: 100%;
 font-size: 1rem;
}

input ~ span {
 display: block;
 width: 0;
 height: 3px;
 background: #8e44ad;
 position: absolute;
 bottom: 0;
 left: 0;
 -webkit-transition: all 0.125 s ease;
 transition: all 0.125 s ease;
}

input:focus { outline: 0; }

input:focus ~ span {
 width: 100%;
 -webkit-transition: all 0.075 s ease;
 transition: all 0.075 s ease;
}


</style>




<div class="page-wrap" style="margin-top:150px;">
 <div class="styled-input">
 <input type="text">
<label>from</label>
 <span></span> </div>
 <div class="styled-input">
 <input type="text">
<label>to</label>
 <span></span> </div>
 <div class="styled-input">
 <input type="tel">
<label>Phone</label>
 <span></span> </div>

</div>



When the input (the cursor is not inside) is not present, the required attribute, then input-s look like this:

5a3214bc83e2d915347748.jpeg

When present (requires this conclusion, but no required):

5a3214c5967bd264732832.jpeg

What can be the reason for such behavior?
June 10th 19 at 15:19
1 answer
June 10th 19 at 15:21
And what's required? You have the same
input:focus ~ label, input:valid ~ label {
 font-size: 0.75 em;
Let's see what is the difference between input fields "from", "to" from "Phone" https://jsfiddle.net/Le6qbfbs/ - Dakota.Brakus commented on June 10th 19 at 15:24

Find more questions by tags HTML