阅读 1197

[译]这可能是最好用的 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) 伪类并不适应于所有浏览器,个人建议你在网站里使用前先检查下浏览器的兼容性。

image.png

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个猫奴并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)

关注下面的标签,发现更多相似文章
评论