我如何在普通 css 中修复此浮动标签？

Question

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

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

我已经注释掉了应该起作用的 CSS。我的 CSS 有问题吧？而不是顺风？

Answer 1

尝试 select label 当它的兄弟 input 没有显示 input:not(:placeholder-shown) + label 的占位符时，这是您使用新 select 的样式或：

.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;
}

Answer 2

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

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

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

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>

我如何在普通 css 中修复此浮动标签？

How do i fix this floating label in plain css?

css

tailwind-css