伪元素:placeholder-shown&&:focus-within
Posted bgwhite
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了伪元素:placeholder-shown&&:focus-within相关的知识，希望对你有一定的参考价值。
:placeholder-shown另外，划重点，这个伪类是仍处于实验室的方案。也就是未纳入标准，当然我们的目的是探寻有意思的 CSS 。当 input 类型标签使用了 placeholder 属性有了默认占位的文字，会触发此伪类样式。配合:not()伪类，可以再改变当默认文字消失后的样式，再配合本文的主角，我们可以实现表单的一系列效果。
CSS 代码大概呈现成这样：
.g-container { width: 500px; height: 60px; input { height: 100%; width: 100%; &:not(:placeholder-shown) { ... } &:placeholder-shown { ... } } &:focus-within { ... } }
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .g-container { position: relative; margin: 100px auto; display: flex; flex-wrap: wrap; width: 500px; height: 60px; overflow: hidden; transition: 0.3s; } .g-container > * { border: none; outline: none; } .g-container .g_input_search { padding: 0 15px; height: 100%; width: 100%; border: 1px solid #ddd; font-size: 18px; box-sizing: border-box; } /*.g-container .g_input_search:not(:placeholder-shown) {*/ /*border: 1px solid #03a9f4;*/ /*}*/ .g-container .g_input_search:not(:placeholder-shown) + .g_button_search { opacity: 1; } .g-container .g_input_search:placeholder-shown + .g_button_search { opacity: 0; } .g-container .g_input_search:not(:placeholder-shown){ border: 10px solid #03a9f4; font-size: 38px; color: #03a9f4; } .g-container .g_button_search { background: #03a9f4; color: #feffd4; font-size: 15px; cursor: pointer; width: 100px; height: calc(100% - 20px); transition: 0.3s; position: absolute; right: 10px; top: 10px; } .g-container:focus-within { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: #bbb; box-shadow: 4px 4px 10px 2px #ddd; } </style> </head> <body> <div class="g-container"> <input type="text" placeholder="输入你想查询的内容" class="g_input_search" > <button type="button" class="g_button_search">GO</button> </div> </body> </html>
以上是关于伪元素:placeholder-shown&&:focus-within的主要内容，如果未能解决你的问题，请参考以下文章