占位符有问题，它没有按预期移动

Question

我不知道为什么它不动，我想知道出了什么问题

这是css(sass)

.find-property-main
.custom-inputs
position: relative
display: inline-block
.placeholder-label
bottom: -1px !important
font-size: 0.8rem
text-transform: uppercase
color: #707274 !important
position: absolute
pointer-events: none
@include customize-transition ($duracion: 0.5s)         
.placeholder-input
font-size: 0.8rem
text-transform: uppercase
border: none
border-bottom: solid 2px #ced4da
border-radius: 0
margin: 0
padding: 0
height: calc(1rem + 0.75rem + 2px)

.custom-inputs input:focus ~ .placeholder-label, .custom-inputs input:not(:focus):valid ~ .placeholder-label
bottom: 12px !important
font-size: 0.7rem
font-weight: bold
color: rgb(17, 38, 78)

这是 HTML

<form action="#" method="$_POST" class="border p-5 find-property-main">                         
<div class="form-form col-3 custom-inputs">
<label class="placeholder-label">Tamaño</label>
<input list="casa" type="text" class="form-control placeholder-input" placeholder="">
<datalist id="casa">
<option value="Pequeña">
</option>
<option value="Mediana">
</option>
<option value="Grande">
</option>
</datalist>
</div>

我已经查看了它，显然一切都很好，但是当我尝试输入数据时，标签不会移动。

我想知道我做错了什么，谢谢。

Answer 1

问题是您的选择器针对的是具有焦点<input />作为前置<label />。但是在您的html中，标签排在第一位，输入排在后面。为了使选择器正常工作，您必须切换它们：

<form action="#" method="$_POST" class="border p-5 find-property-main">                         
<div class="form-form col-3 custom-inputs">
<input list="casa" type="text" class="form-control placeholder-input" placeholder="">
<label class="placeholder-label">Tamaño</label>
<datalist id="casa">
<option value="Pequeña">
</option>
<option value="Mediana">
</option>
<option value="Grande">
</option>
</datalist>
</div>