[译]这多是最好用的 CSS 技巧

原文连接：xtrp.io/blog/2019/1…

假设你在建立一个搜索表单。用户输入内容，而后点击搜索按钮进行搜索。

这里是可供参数的 HTML 代码：

<input placeholder="Search...">
<button>Search!</button>
复制代码

须要注意的是，搜索按钮只在输入框中输入内容后，才能点击。咱们总不能容许用户使用空字符串搜索吧？

JavaScript 的方式

咱们可使用下面的代码实现上述功能。

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

酷酷的 CSS 方式

在我看来，不使用 JavaScript 的状况下，使用 CSS :not(:placeholder-shown) 伪类方式更好。这个选择器由两部分组成：:not() 和 :placeholder-shown。

• :placeholder-shown：顾名思义，这个伪类仅在输入框中的占位文本显示的时候，才生效。若是输入框中输入内容，则占位文本不显示；若是输入框为空，则占位文本显示。
• :not()：接受选择器做为参数，对该选择器以外的元素应用样式。

因此，:not(:placeholder-shown) 就表示输入框有内容时，为它应用样式。

咱们或者结合 CSS + 操做符一块儿使用，来完善搜索按钮的功能。

button {
  display: none;
}

input:not(:placeholder-shown) + button {
  display: block;
}
复制代码

请看下面的效果。当用户输入内容了，搜索按钮就会显示，不然不显示。与 JavaScript 惟一不一样的地方……就是没有 JavaScript。

另一个有趣的用例

咱们还能够把上面的 :not(:placeholder-shown) 结合 :focus 伪类一块儿使用。这样的话，行为就变成了当在输入框中输入内容时，才应用样式：

<style> /* 这块的逻辑是：当 inpout focus 且用户输入了内容时，提示“You are typing” */ input:focus:not(:placeholder-shown) + #otherElement { display: block; } /* 默认“You are typing”的文本是隐藏的 */ #otherElement { display: none; } </style>

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

总结

这是一个很是巧妙的技巧，在建立搜索表单、登陆表单等颇有用。我但愿你喜欢这篇文章，并发现这个 CSS 技巧有对你有用。固然，:not(:placeholder-shown) 伪类并不适应于全部浏览器，我的建议你在网站里使用前先检查下浏览器的兼容性。

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个猫奴而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

（完）