How to add <select> floating label without using required - html

Question

I went through most of the questions related to this. But I couldn't find out the solution. I have provided the code so far. My requirement is to remove the required from the <select> and work this as it is. If I remove it at the moment, this will not work as expected.
I know this is really possible via JavaScript/jQuery but I want to do this with CSS.
label.input {
position: relative;
overflow: hidden;
}
span.input__label {
position: absolute;
left: 0;
padding: 7px 12px;
width: 240px;
font-size: 14px;
color: #828282;
pointer-events: none;
height: 35px;
}
.input:active::after {
transform: rotate(-180deg);
}
.input__field:invalid {
color: transparent;
transition: 200ms color linear 100ms;
}
.input__field:valid + .input__label, .input__field:focus:valid + .input__label {
transform: translate(0.5em, -10%);
transition: 200ms transform ease-out;
color: #000;
top: 5px;
left: 2px;
padding: 0 7px;
font-size: 10px;
}
.input__label {
position: absolute;
left: 0;
top: 0;
right: 0;
padding: 1.5rem 1.5rem 0;
pointer-events: none;
transform-origin: 0 0;
transition: 200ms transform ease-out 200ms;
will-change: transform;
}
select.form-select {
width: 240px;
font-size: 14px;
color: #828282;
display: inline-block;
}
select.form-select option {
color: #828282;
}
.form-select:focus {
border-color: #dcd9d6;
outline: 0;
box-shadow: none;
}
form select {
width: 240px;
height: 52px;
padding: 16px 11px;
font-weight: normal;
font-size: 14px;
color: #828282;
border-radius: 5px;
background: #fff;
border: 1px solid #dcd9d6;
margin-right: 7px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<label class="input">
<select name="max-price" class="input__field form-select" id="maxPrice" required>
<option value="" selected disabled hidden></option>
<option value="100,000">100,000</option>
<option value="200,000">200,000</option>
<option value="300,000">300,000</option>
</select>
<span class="input__label">Max Price</span>
</label>

Answer 1

Hope it's work for you !!!
You need to add onchange event in select.
onchange=" this.dataset.select = this.value;
label.input {
position: relative;
overflow: hidden;
}
span.input__label {
position: absolute;
left: 0;
padding: 7px 12px;
width: 240px;
font-size: 14px;
color: #828282;
pointer-events: none;
height: 35px;
}
.input:active::after {
transform: rotate(-180deg);
}
.input__field:invalid {
color: transparent;
transition: 200ms color linear 100ms;
}
.input__label {
position: absolute;
left: 0;
top: 0;
right: 0;
padding: 1.5rem 1.5rem 0;
pointer-events: none;
transform-origin: 0 0;
transition: 200ms transform ease-out 200ms;
will-change: transform;
opacity: 0;
}
select.form-select {
width: 240px;
font-size: 14px;
color: #828282;
display: inline-block;
}
select.form-select option {
color: #828282;
}
.form-select:focus {
border-color: #dcd9d6;
outline: 0;
box-shadow: none;
}
form select {
width: 240px;
height: 52px;
padding: 16px 11px;
font-weight: normal;
font-size: 14px;
color: #828282;
border-radius: 5px;
background: #fff;
border: 1px solid #dcd9d6;
margin-right: 7px;
}
select[data-select]+ .input__label {
transform: translate(0.5em, -10%);
transition: 200ms transform ease-out;
color: #000;
top: 5px;
left: 2px;
padding: 0 7px;
font-size: 10px;
opacity: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<label class="input">
<select onchange=" this.dataset.select = this.value; " name="max-price" class="input__field form-select" id="maxPrice">
<option value="" selected disabled hidden>Max Price</option>
<option value="100,000">100,000</option>
<option value="200,000">200,000</option>
<option value="300,000">300,000</option>
</select>
<span class="input__label">Max Price</span>
</label>