Question

很抱歉，标题通用，无论如何，我有一些简单的HTML，如下所示：

<div class="block flex-1 mx-4 relative w-1/2">
    <div class="form-group label-floating">
        <label class="control-label">Password</label>
        <input class="form-control" placeholder="" type="password">
        <span class="material-input"></span>
    </div>
</div>

现在，每当有人单击输入时，我都会像这样缩小标签大小：

使用以下CSS：

&.label-floating {

    &:focus-within {
        & > .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }
}

现在，我的问题是，如果输入不为空并且用户离开了输入，则标签将恢复为正常大小。所以我尝试过这样的事情：

具有以下CSS：

&.label-floating {

    &:focus-within {
        & > .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }

    & input:not(:empty){
        & .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
        & < .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }
}

无济于事，所以我的问题是，有没有办法用纯CSS实现我想要的？

编辑：有人可以编辑OP来嵌入图像吗？

使用纯CSS更新：

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group > .control-label {
  color: #888da8;
}

.form-group.label-floating:focus-within > .control-label {
  top: 10px;
  font-size: 11px;
  line-height: 1.07143;
}

.form-group.label-floating input:not(:empty) .control-label {
  top: 10px;
  font-size: 11px;
  line-height: 1.07143;
}

Answer 1

在不检查内容是否有效的情况下，不能将包含值的输入作为目标。但是，您可以使用环回方法来检查输入是否具有 no 值。

您的输入具有placeholder属性。 CSS选择器:placeholder-shown将针对显示占位符的输入；也就是说，输入具有指定的占位符属性并且不为空。

因此，您必须为空输入的标签设置样式。

.form-control:placeholder-shown ~ .control-label {
  font-size: 20px;
  color: red;
}

.label-floating:focus-within > .control-label,
.form-control ~ .control-label {
  font-size: 11px;
    color: blue;
}

<div class="form-group label-floating">
    <input class="form-control" placeholder="" type="password">
    <label class="control-label">Password</label>
</div>

请注意，:placeholder-shown尽管是highly requested，但并未在IE / Edge中实现；但是，polyfills可用。

是否可以选择最近的CSS选择器或父级

1 个答案: