如何在纯 CSS 中修复此浮动标签？答案

【问题标题】：How do i fix this floating label in plain css?如何在纯 CSS 中修复此浮动标签？
【发布时间】：2022-01-09 12:58:17
【问题描述】：

项目在这里 -> https://play.tailwindcss.com/udQSLuVwHa

当我在 InputField 内部单击时（不要直接单击用户名标签），标签会正确缩小。如果我点击输入字段（使其失去焦点），标签会再次变大。现在，如果我在 InputField 中输入一些文本并使其失去焦点，则用户名标签不应缩小，而是保持在顶部。

我已经注释掉了应该可以工作的 CSS。我的 CSS 有问题吗？而不是顺风？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

当 input 的同级 input 未显示占位符时，尝试选择 label，这是您使用新选择器的样式：

.outline:focus-within label,
input:not(:placeholder-shown) + label {
  background-color: white;
  transform: scale(0.75) translateY(-1rem);
  z-index: 0;
  margin-left: 0.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0px;
  padding-bottom: 0px;
}

【讨论】：

【解决方案2】：

Saeed 的回答是一个很棒的 CSS 解决方案。

如果您想在 JavaScript 中解决这个问题，您可以执行以下操作：

（当您运行代码 sn-p 时，注意样式看起来会有所不同，因为不存在顺风）

inputUsername = document.getElementById('inputUsername');
labelUsername = document.getElementById('labelUsername');

inputUsername.onfocus = () => {
    labelUsername.classList.add('outline');
}

inputUsername.onblur = () => {
    if (inputUsername.value.length == 0){
        labelUsername.classList.remove('outline');
    }
}

.outline {
    background-color: white;
    transform: scale(0.75) translateY(-1rem);
    z-index: 0;
    margin-left: 0.75rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0px;
    padding-bottom: 0px;
  }

<div class="outline relative border-2 focus-within:border-blue-500">
    <input id="inputUsername" class="bg-red-700 block p-4 w-full text-lg appearance-none bg-transparent" placeholder=" " type="text" />
    <label id="labelUsername" for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
  </div>

【讨论】：