可能是最有用的 CSS 技巧

假设您正在构建一个简单的搜索表单，用户在输入框中输入搜索内容，然后单击搜索按钮进行搜索。

以下是搜索表单的一些示例 HTML：

<input placeholder="Search...">
<button>Search!</button>

请注意，搜索按钮只有在搜索框中实际输入内容后才可点击。你肯定不希望有人搜索空字符串吧？

JavaScript 方式

通常，可以使用一些快速的 JavaScript 来执行此操作，例如：

inputElement.oninput = function(e) {
    if(inputElement.value != "") {
        activateSearchButton();
    } else {
        deactivateSearchButton();
    }
};

Cool-CSS-Trick 方法

我认为，有一种更优的方法来实现这一点，无需 JavaScript，而是使用:not(:placeholder-shown)CSS 伪类。伪类由两部分组成：:not()和:placeholder-shown。

• :placeholder-shown— 当输入框中的占位符显示时处于活动状态。当输入框为空时，占位符将显示；当用户输入内容时，占位符将不会显示。
• :not()— 采用该样式不应应用的选择器的参数。

因此，:not(:placeholder-shown)简单来说就是当占位符未显示时将样式应用于输入元素；这意味着只有当输入框不为空时才会应用样式。

我们可以将其与+CSS 运算符结合起来，以实现搜索按钮的功能：

button {
    display: none;
}

input:not(:placeholder-shown) + button {
    display: block;
}

这里，只有当输入有内容时，按钮才会显示，其工作原理与 JavaScript 版本完全相同，只是……没有 JavaScript。

另一种有趣的使用方法

我们还可以将其与:focus伪类结合起来，以便仅当用户在输入框中键入时才应用样式，如下所示：

<input type="text" placeholder="type something">
<p id="otherElement">You are typing</p>

#otherElement {
    display: none;
}
input:focus:not(:placeholder-shown) + #otherElement {
    display: block;
}

结论

总的来说，这是一个非常巧妙的技巧，在我构建搜索表单、登录表单等表单时确实非常有用。希望你喜欢这篇文章，并发现这个 CSS 技巧非常有效。

请注意，如果没有必要的变量定义，本文开头引用的 JavaScript 代码将无法运行，并且:not(:placeholder-shown)伪类可能无法在某些 Web 浏览器上运行，尤其是在阅读本文时。我个人建议在应用或网站中实现功能之前，先检查浏览器兼容性。

感谢您的浏览。

— 加布里埃尔·罗穆阿尔多，2019 年 10 月 2 日