如何在<select>不使用必需的情况下添加浮动标签

Question

我已经完成了与此相关的大部分问题。但我找不到解决办法。到目前为止，我已经提供了代码。我的要求是从<select>中删除required，并按原样处理。如果我现在删除它，这将无法按预期工作。

我知道这确实可以通过JavaScript/jQuery实现，但我想用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

希望它对你有用！！！

您需要在select中添加onchange事件。

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>