:focus-within伪类选择器的3种应用
Posted daobanan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了:focus-within伪类选择器的3种应用相关的知识,希望对你有一定的参考价值。
1.点击form里任意input隐藏form以外内容提高用户体验
<form><input type="text"></form>
form { transition: outline .2s; outline: 2000px solid hsla(0,0%,100%,0); position: relative; z-index: 1; } form:focus-within { outline: 2000px solid hsla(0,0%,100%,1); }
2.解决带计数文本域自身:focus高亮重叠问题
<div class="textarea-x"> <textarea id="forFocus" maxlength="250" rows="5"></textarea> <label for="forFocus" class="textarea-count">0/250</label> </div>
.textarea-x { max-width: 298px; border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; padding-bottom: 24px; transition: border-color .2s; overflow: hidden; position: relative; } .textarea-count { position: absolute; font-size: 12px; line-height: 16px; bottom: 5px; right: 10px; color: #999; } .textarea-x > textarea { display: block; width: 100%; padding: 7px 9px; border: 0; background: none; -ms-box-sizing: border-box; box-sizing: border-box; outline: 0; resize: none; } .textarea-x:focus-within { border-color: #00a5e0; }
3.纯css实现下拉
<div class="details"> <a href="javascript:">我的消息</a> <div class="box"> <li>1</li> <li>2</li> <li>3</li> </div> </div>
.box { display: none; } .details:focus-within .box { display: block; }
:focus跟:focus-within的区别在于前者表示当前元素处于focus状态时,后者是当前元素或者当前元素的子元素处于focus状态时。
以上是关于:focus-within伪类选择器的3种应用的主要内容,如果未能解决你的问题,请参考以下文章
标记选择器、类选择器、id选择器、伪类选择器的先后顺序是啥?