主页 / 问题 / 1599341
Accepted
Siarhei789654
Asked:2024-11-10 06:12:13 +0000 UTC2024-11-10 06:12:13 +0000 UTC

选择字段标签的 CSS 动画

  • 772

如何实现类似于输入的选择动画？输入代码工作正常，标签位于字段顶部，如果字段已填充，标签将保持在那里，并且在更改焦点时保持在顶部。

<style>
.form-control:focus ~ .form-label,
.form-control:not(:placeholder-shown) ~ .form-label{
    top: -18px;
    font-size: 12px;
}
</style>
<input class="form-control" list="datalistOptionsWaybill" id="waybill" placeholder=" ">
<label for="waybill" class="form-label">Waybill</label>

如何更改CSS选择？因为，类比输入，在这种情况下不起作用

<select id="carsField" class="form-control>
   <option>car</option>
</select>
<label for="carsField" class="form-label">Car</label>

谢谢

html

1 个回答

  1. Best Answer

    由于您没有提供动画，我们将利用现有的内容。我们会画它们。

    1. 在你的情况下没有理由使用~.她的任务是占领右边的所有邻居。虽然目前为止附近只有一个<label>，但也仅此而已。因此我们写得正确+；
    2. 我不认为用 negation 来加载它有什么意义:not(:placeholder-shown)，除非你有很多不同的情况并且它们都需要以不同的方式解决。好吧，我们就这样吧；
    3. 为这些元素提供额外的样式来单独处理它们而不会将所有内容混在一起也没什么坏处。

    /* этот финт работает, если нет атрибута, а не как у вас — есть, но пустой*/
.form-control:not(:placeholder-shown) + .form-label {
  font-size: 16px;
  background-color: grey;
}
.form-control:not(:placeholder-shown):focus + .form-label{
  font-size: 12px;
  background-color: blue;
}

/* можно просто не добавлять атрибут и не нагружать лишнее  */
.form-control + .form-label {
  background-color: #ddb9ff;
  font-size: 16px;
}
.form-control:focus + .form-label{
  font-size: 12px;
  background-color: gold;
}

/* по тому же принципу, что и выше (при фокусе на элементе) нужно захватить соседнюю справа label */
.form-control:not(:placeholder-shown) + .form-label{
  background-color: red;
}
.form-control:not(:placeholder-shown):focus + .form-label{
  background-color: lime;
}

/* ++ если нужно скрывать placeholder принудительно*/
:focus::placeholder {
  color: transparent;
}
    <input class="form-control test" list="datalistOptionsWaybill" id="waybill" placeholder="Hello, ...?">
<label for="waybill" class="form-label">Waybill</label>
<hr>

<input class="form-control" list="datalistOptionsWaybill" id="waybill">
<label for="waybill" class="form-label">Waybill</label>
<hr>

<select id="carsField" class="form-control">
<option>car</option>
<option>nocar</option>
</select>
<label for="carsField" class="form-label">Carrr</label>

    • 0

相关问题