How can I add a floating label to a input? - html

Question

I want that when a user comes and tries to type text in "input" the label goes up, and if they leave that area blank it comes back to the original position. If user typed something over there it will stay up there.
I tried this code with input box with required it is working fine, but when I try to do this with input and add some content in input the label coming back down it need to be stay up there.
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" placeholder="" >
<label class="floating-label" >Button text</label>
</div>
I remove input:not(:focus):valid~.floating-label so it can work with not required field

Answer 1

Try this code since because of placeholder happening.
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
input + .form-control-placeholder {
position: absolute;
transition: all 200ms;
top: -20px;
bottom: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
input:placeholder-shown + .form-control-placeholder {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-control:focus + .form-control-placeholder {
position: absolute;
transition: all 200ms;
top: -20px;
bottom: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
label{
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
<br>
<br>
<div class="form-group">
<input type="text" class="form-control" placeholder=" " >
<label class="form-control-placeholder">Button text</label>
</div>

Answer 2

Add Space to you placeholder by default and after that use input:not(:placeholder-shown) property to check if input is empty or not. Here working example of your code
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.btn-add input:not(:placeholder-shown) ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}
<div class="form-float btn-add">
<input type="text" class="inputText" placeholder=" " >
<label class="floating-label" >Button text</label>
</div>

Answer 3

Since :placeholder-shown only works with placeholder text shown (no empty string) you could use visibility.
div {
margin-top:40px;
}
.btn-add input[type="text"] {
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: -20px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float input:placeholder-shown ~ label {
top: 0;
visibility: hidden;
}
.form-float {
position: relative;
}
<div class="form-float btn-add">
<input type="text" placeholder="Button Label" >
<label class="floating-label">Button Label</label>
</div>

Answer 4

These are two solutions. I think they need some adjustment because probably they are not correct.
Solution #1: Floating label on focus
.custom-form-input {
display: block;
width: 100%;
height:32px;
padding: 1rem .55rem .065rem .55rem;
font-weight: 400;
border: 1px solid #cad3d6;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: #fafafa;
font-size: 0.79em;
color:#000000;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.custom-form-input:focus,
.custom-form-input:active {
color: #212529;
background-color: #fff;
border-color: #585d61;
outline: 0;
}
.custom-form-floating {
position:relative;
}
.custom-form-floating-label {
position:absolute;
color: #9aa0a9;
font-size: 0.85em;
height:100%;
width:100%;
top: 0px;
display:flex;
align-items: center;
padding: 0 .55rem 0 .55rem;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
user-select: none;
pointer-events: none
}
.custom-form-input:focus ~ label,
.custom-form-input:valid ~ label {
font-size: 0.65rem;
height:55%;
}
.wrapper {
width:150px;
}
<div class="custom-form-floating">
<input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Example 1</label>
</div>
<div class="wrapper">
<div class="custom-form-floating">
<input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Example 2</label>
</div>
</div>
Solution #2: Floating label when type a letter
.custom-form-input {
display: block;
width: 100%;
height: 5px;
font-weight: 400;
border: 1px solid #cad3d6;
transition: border-color .15s ease-in-out;
background-color: #fafafa;
font-size: 1.2em;
color: #000000;
padding: 1rem .50rem 1rem .50rem;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
}
.custom-form-input:focus,
.custom-form-input:active {
color: #212529;
background-color: #fff;
border-color: #585d61;
outline: 0;
}
.custom-form-floating {
position: relative;
}
.custom-form-floating-label {
position: absolute;
color: #9aa0a9;
font-size: 0.85em;
height: 100%;
width: 100%;
top: 0px;
display: flex;
align-items: center;
padding: 0 .55rem 0 .55rem;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
user-select: none;
pointer-events: none
}
.custom-form-input:valid {
padding: 1.50rem .50rem .50rem .50rem;
font-size: 0.79em;
}
.custom-form-input:valid~label {
font-size: 0.65rem;
height: 55%;
}
.wrapper {
width:250px;
}
<div class="wrapper">
<div class="custom-form-floating">
<input id="test" class="custom-form-input"
aria-label="usuario o correo electrónico" required=true aria-required="true"/>
<label for="test" class="custom-form-floating-label">Correo electrónico o
usuario</label>
</div>
</div>