Float label is work when the field is required. When i remove required attribute from the input tag it stop working.

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,
.btn-add input:not(:focus):valid ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.btn-add-link input[type="url"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add-link input:focus ~ .floating-label,
.btn-add-link input:not(:placeholder-shown)~.floating-label,
.btn-add-link input:not(:focus):valid ~ .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 > 
     <input type="text"   >                             
     <label >Button text</label>                         </div>

I don't want this field as required field how can i fix it. how can i do that float label work without making input required

CodePudding user response：

The selector input:focus selects the input when it get focus and the selector input:not(:focus):valid selects it if it is valid input but not focused. Since you don't want the input field to be necessarily to be filled, you have to remove:

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