Floating Label Not Working

Floating label not working

Selector input:focus selects input when it get focus and Selector input:not(:focus):validselects input if valid input not be focus.

A. when you use required attribute and Do not enter any value in it:

1)Before focus and when lose focus:Nothing not be selected.(original state)

2)after focus input is invalid and it is selected with input:focus.

B. when you remove required attribute:

1)before focus select with input:not(:focus):valid.

2)after focus select with input:focus.

So, input is selected forever , And .floating-label will not return to the original state.

in your question, you say:"I don't need the required filed"

So, remove input:not(:focus):valid~.floating-label.

Full Code:

input:focus ~ .floating-label {

top: 6px;

bottom: 12px;

left: 20px;

font-size: 11px;

opacity: 1;

}

.floating-label {

position: absolute;

pointer-events: none;

left: 20px;

top: 18px;

text-transform: uppercase;

transition: 0.2s ease all;

color: #b2b2b2;

}

<input type="text" id="floating_name" value="">

<span class="floating-label">Enter</span>