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

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

问题是您的选择器以 <label /> 为目标，该 <label /> 作为前身具有焦点 <input />。但是在您的 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>

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

Problem with Placeholder, it's not moving as supposed to

css

sass

placeholder