CSS的:focus-within偽類選擇器怎么用

本篇內(nèi)容主要講解“CSS的:focus-within偽類選擇器怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS的:focus-within偽類選擇器怎么用”吧!

一、了解CSS :focus-within偽類選擇器

CSS :focus-within偽類選擇器和IE8就開始支持的:focus可以說是近親，區(qū)別在于:focus表示當(dāng)前元素處于focus狀態(tài)時候干嘛干嘛，而:focus-within表示當(dāng)前元素或者當(dāng)前元素的子元素處于focus狀態(tài)時候干嘛干嘛。

舉個例子：

form:focus {
  outline: solid;
}

表示僅僅當(dāng)<form>處于focus狀態(tài)時候，<form>元素outline出現(xiàn)。

form:focus-within {
  outline: solid;
}

表示<form>元素自身，或者<form>內(nèi)部的子元素處于focus狀態(tài)時候，<form>元素outline出現(xiàn)。換句話說，子元素focus，可以讓任意父級元素樣式發(fā)生變化。

這個新特性的支持，未來勢必會帶來更加豐富的交互形式，以及特定場景簡化我們實現(xiàn)。

兼容性

兼容性如下截圖：

還是挺喜人的。

二、CSS :focus-within偽類選擇器實際應(yīng)用舉例

1. 表單輸入勿擾模式

當(dāng)我們表單輸入，選擇或者進(jìn)行交互時候，頁面上表單以為其他內(nèi)容全部都不可見。

CSS代碼如下：

form {
    outline: 2000px solid hsla(0,0%,100%,0);
    transition: outline .2s;
    position: relative;
    z-index: 1;
}
form:focus-within {
    outline: 2000px solid hsla(0,0%,100%,1);
}

效果如下截屏gif：

大屏瀏覽器體驗更有感覺，您可以狠狠的點(diǎn)擊這里：:focus-within偽類選擇器與表單輸入勿擾模式demo

本案例是真實的勿擾模式效果可以放心大膽在實際項目中使用，因為這是一個體驗增強(qiáng)的交互，就算瀏覽器不支持，對原本功能也不會有任何影響。

2. 帶計數(shù)文本域的focus高亮

對于帶計數(shù)的組件化的多行文本域，計數(shù)的數(shù)值通常是設(shè)計在文本域的右下角，這樣能夠適應(yīng)各種復(fù)雜的場景。如下截圖：

然而這種設(shè)計對我們的布局實現(xiàn)帶來的挑戰(zhàn)。

我們通常想到的方法是，計數(shù)元素浮在下面的textarea元素上。然而這種時間存在有致命的不足，那就是輸入框的內(nèi)容有可能和我們的計數(shù)重疊，以及出現(xiàn)的滾動條和技術(shù)文本重疊，如下截圖所示：

您可以狠狠地點(diǎn)擊這里：帶計數(shù)文本域自身:focus高亮重疊問題demo

因此，我們通常做法就是：邊框使用父級<div>元素模擬，文本域元素和技術(shù)元素上下依次排列（非重疊），文本域原本的邊框去除。

假設(shè)HTML如下：

<div class="textarea-x">
    <textarea></textarea>
    <label class="textarea-count">0/250</label>
</div>

則核心CSS這樣：

/* 父級div元素模擬邊框 */.textarea-x {
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
}/* 文本域原本的邊框去除 */.textarea-x > textarea {
    border: 0;
    background: none;
}

然而上面的實現(xiàn)有個非常嚴(yán)重的不足，那就是<textarea>元素:focus時候，邊框無法高亮，因為CSS中沒有父選擇器！

因此，實際開發(fā)的時候，我們會使用相鄰兄弟選擇器，以及新建一個兄弟元素來模擬邊框。

HTML結(jié)構(gòu)如下：

<div class="textarea-x">
    <textarea></textarea>
    <div class="textarea"></div>
    <label class="textarea-count">0/250</label>
</div>

原理如下圖示意：

對應(yīng)的核心CSS代碼如下：

.textarea-x {
    position: relative;
    z-index: 0;
}
.textarea-x > textarea {
    border: 0;
    background: none;
    outline: 0;
    resize: none;
    position: relative;
}
.textarea-x > .textarea {
    position: absolute;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    top: 0; bottom: 0; left: 0; right: 0;  
    z-index: -1;
}
.textarea-x > :focus + .textarea {
    border-color: #00a5e0;    
}

由于.textarea元素和原生的<textarea>元素是相鄰兄弟關(guān)系，因此我們可以借助相鄰兄弟選擇器，讓<textarea>元素focus時候后面用來模擬邊框的.textarea元素高亮。也就是這么一段CSS代碼：

.textarea-x > :focus + .textarea {
    border-color: #00a5e0;    
}

這種實現(xiàn)兼容IE7+瀏覽器。下圖為實現(xiàn)后的效果截圖：

當(dāng)然涉及到具體代碼，還是有很多細(xì)節(jié)需要注意的，您可以狠狠地點(diǎn)擊這里：利用相鄰兄弟選擇器模擬帶計數(shù)文本域:focus效果demo

但是，現(xiàn)在有了CSS :focus-within偽類選擇器，我們的事情就簡單多了。

還是開始提到的父級<div>元素模擬的做法，然后，配合這么一句CSS就可以了：

.textarea-x:focus-within {
    border-color: #00a5e0;    
}

就是這么簡單。

您可以狠狠地點(diǎn)擊這里：:focus-within偽類與帶計數(shù)文本域高亮demo

focus時候效果如下截圖：

三、:focus-within更多思路、更棒案例和結(jié)束語

:focus-within偽類原本設(shè)計的作用是原生表單元素focus時候，祖先<form>元素可以也有狀態(tài)變化。

但是在我看來，:focus-within功能之強(qiáng)悍，遠(yuǎn)遠(yuǎn)不是僅僅和祖先<form>元素玩過家家這么簡單。

理論上，只要頁面上任意一個元素focus，通過:focus-within就能對頁面上任意的元素進(jìn)行樣式控制。

例如：

html:focus-within xxx {    /*xxx跑得了嗎？跑不了*/}

我想到的有：

1. 相鄰選擇器，加號，或者彎彎都只能選擇后面的元素，但是，有了:focus-within，我們就可以對前面元素進(jìn)行控制，雖然只能在:focus行為場景下。例如請重復(fù)輸入密碼時候，讓上面的輸入密碼框也高亮。

2. 基于純CSS和focus行為實現(xiàn)下拉列表的交互成為了可能。只要把按鈕和下拉元素放在一個容器中，就可以了。

   您可以狠狠地點(diǎn)擊這里：:focus-within偽類與純CSS下拉列表demo

   點(diǎn)擊“我的消息”，就會出現(xiàn)下拉列表；此時點(diǎn)擊下拉列表里面的條目，下拉元素也一直顯示（因為列表是可focus的<a>元素）。只有點(diǎn)擊頁面空白元素或其他位置，下拉列表才會隱藏。完全符合實際項目開發(fā)的下拉列表交互需求。

   交互效果如下GIF截屏所示：

   

   核心代碼如下：

   <div class="details">
       <a href="javascript:" class="summary">我的消息</a> 
       <div class="box">
           <a href="javascript:">我的回答<sup>12</sup></a>
           <a href="javascript:">我的私信</a>
           <a href="javascript:">未評價訂單<sup>2</sup></a>
           <a href="javascript:">我的關(guān)注</a>
       </div>
   </div>

   .box {
       display: none;
   }
   .details:focus-within .summary {
       background-color: #fff;
   }
   .details:focus-within .box {
       display: block;
   }

到此，相信大家對“CSS的:focus-within偽類選擇器怎么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！