如果输入字段为空，仅使用 CSS 如何应用样式？

Question

我目前正在开发一个接受文本输入的表单。但是，在输入有效的电子邮件地址之前，我实现的功能对于电子邮件输入无法正常工作。此外，此行为也适用于非必需输入，这些输入被视为有效。我想通过在输入字段获得焦点或包含值时将特定样式应用于输入字段来增强此功能。这是我当前的

css

代码。

    .label-animated {
        position: absolute;
        left: 1.6rem;
        top: 1rem;
        cursor: text;
        font-size: medium;
        transition: .5s ease;
        background-color: var(--bg-100) !important;
    }
    .input.input-form {
        width: 100%;
        font-size: medium;
        padding: 1rem;
        padding-bottom: .5rem;
        border: .0625rem solid var(--border-200);
        border-radius: 30rem; /*max border*/
        outline: none;
        background-color: transparent;
    }

    .input.input-form:focus~.label-animated,
    .input.input-form:valid~.label-animated {
        top: -.72rem !important;
        left: 2rem;
        color: var(--accent-500);
    }

尽管广泛寻找解决方案，但我无法找到有关此问题的任何资源或指导。目前似乎没有可用的信息或解决方案来解决此特定问题。我可以选择一个没有值的输入

input[value=""]

但有值，我真的不知道。我可以只使用 CSS 来解决这个问题吗？

Answer 1

您可以单独使用 CSS，通过利用 :placeholder-shown 伪类以及相邻的同级组合符 (+)，根据输入字段是否为空来将样式应用于输入字段。这是一个 input:not(:placeholder-shown) 选择器，当输入字段不为空时，将样式应用到输入字段。您可以根据需要修改这些样式。 当输入字段为空时， input:placeholder-shown + .error-message 选择器会定位相邻的 .error-message 元素。您可以使用它来显示错误消息或根据需要应用任何其他样式。