分享一个最好，最实用的 CSS 技巧
导读：假设你在创建一个搜索表单。用户输入内容，然后点击搜索按钮进行搜索。 这里是可供参数的 HTML 代码： 需要注意的是，搜索按钮只在输入框中输入内容后，才能点击。我们总不能允许用户使用空字符串搜索吧？ 我们可以使用下面的代码实现上述功能。 在...
假设你在创建一个搜索表单。用户输入内容，然后点击搜索按钮进行搜索。
这里是可供参数的 HTML 代码：
需要注意的是，搜索按钮只在输入框中输入内容后，才能点击。我们总不能允许用户使用空字符串搜索吧？
我们可以使用下面的代码实现上述功能。
在我看来，不使用 JavaScript 的情况下，使用 CSS :not(:placeholder-shown) 伪类方式更好。这个选择器由两部分组成：:not() 和 :placeholder-shown。
所以，:not(:placeholder-shown) 就表示输入框有内容时，为它应用样式。
我们或者结合 CSS + 操作符一起使用，来完善搜索按钮的功能。
请看下面的效果。当用户输入内容了，搜索按钮就会显示，否则不显示。与 JavaScript 唯一不同的地方……就是没有 JavaScript。
「译」分享一个最好，最实用的 CSS 技巧
我们还可以把上面的 :not(:placeholder-shown) 结合 :focus 伪类一起使用。这样的话，行为就变成了当在输入框中输入内容时，才应用样式：
「译」分享一个最好，最实用的 CSS 技巧
这是一个非常巧妙的技巧，在创建搜索表单、登录表单等很有用。我希望你喜欢这篇文章，并发现这个 CSS 技巧有对你有用。当然，:not(:placeholder-shown) 伪类并不适应于所有浏览器，个人建议你在网站里使用前先检查下浏览器的兼容性。
「译」分享一个最好，最实用的 CSS 技巧
（正文完）
喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。
我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！
如果你也想学习前端，可以观看【置顶】文章。也可以私信【1】 领取最新前端练手实战项目
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 分享一个最好，最实用的 CSS 技巧
本文地址： https://pptw.com/jishu/668182.html