伪元素:placeholder-shown:focus-within
生活随笔
收集整理的這篇文章主要介紹了
伪元素:placeholder-shown:focus-within
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
:placeholder-shown 另外，劃重點(diǎn)，這個偽類是仍處于實(shí)驗(yàn)室的方案。也就是未納入標(biāo)準(zhǔn)，當(dāng)然我們的目的是探尋有意思的 CSS 。 當(dāng) input 類型標(biāo)簽使用了 placeholder 屬性有了默認(rèn)占位的文字，會觸發(fā)此偽類樣式。 配合:not()偽類，可以再改變當(dāng)默認(rèn)文字消失后的樣式，再配合本文的主角，我們可以實(shí)現(xiàn)表單的一系列效果。 CSS 代碼大概呈現(xiàn)成這樣： .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="輸入你想查詢的內(nèi)容" class="g_input_search" > <button type="button" class="g_button_search">GO</button> </div> </body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/bgwhite/p/9414295.html
總結(jié)
以上是生活随笔為你收集整理的伪元素:placeholder-shown:focus-within的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery插件 -- Cookie插件
- 下一篇： 友情链接