使用純CSS構建樣式切換器，使用：檢查

幾年前，Web開發人員無法僅使用CSS實施和構建如此多的東西，而無需依賴JavaScript。但是今天，CSS已經足夠成熟，可以在不編寫一行JavaScript的情況下做強大的事情。您可能還閱讀了幾篇有關“僅CSS方法”的文章，這些文章證明了CSS的力量。

>僅使用CSS方法，我們不能忽略：檢查的偽級選擇器，我將在這篇文章中使用。當然，我不是第一個寫有關此技術的人，並且關於使用形式元素作為JavaScript替代品還有其他更廣泛的討論。例如，路易斯·拉扎里斯（Louis Lazaris）和瑞安·塞登

鑰匙要點

：CSS中的檢查偽級選擇器可用於構建樣式切換器，而無需編寫JavaScript行。它選擇了檢查或選擇的任何收音機或複選框元素。

>
• ：檢查的偽級選擇器與輸入和標籤元素結合使用。單擊標籤元素中的“ for”屬性，選擇或檢查關聯的輸入元素，從而可以使用：checked selector。
> CSS“位置：固定”聲明以及“頂部”和“右”屬性可用於在頁面上定位元素。 “ z index”屬性可確保標籤保持頁面上其他任何元素的頂部。
：基於用戶與關聯標籤元素的用戶互動，可以使用：檢查的偽級選擇器來更改元素的背景，隱藏或顯示內容或應用其他樣式。
• >：檢查的偽級選擇器與相鄰的兄弟姐妹選擇器（）和一般的兄弟姐妹選擇器（〜）一起使用，從而允許頁面上不同元素之間的相互作用。該技術可用於在網頁上創建各種交互式功能。
>
>使用：檢查
• 簡而言之，
：檢查的偽級選擇器代表（選擇）被檢查或選擇的任何無線電或複選框元素。用戶可以通過選中復選框或在一組無線電按鈕中選擇其他值來更改這些元素的狀態。

>在我們深入研究之前，請看一下最後的演示，以了解我們在本教程中將要構建的內容：

>請參閱純CSS的筆式切換器，使用：codepen上的sitepoint（@sitepoint）檢查。

現在讓我們開始。

>

構建設置框

在演示中，您應該注意到齒輪圖標以及單擊時如何出現帶有一些選項的盒子。在我們繼續解釋組成該框的HTML和CSS之前，請查看以下代碼：

>

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

>由於我們僅有興趣顯示標籤，因此上述代碼用於隱藏複選框和無線電按鈕。此外，所有標籤都有一類設置盒元素，並具有Z-Index屬性，只是為了確保標籤將保持在頁面上的任何其他元素的頂部。

>

>現在我們可以分解構成設置框的代碼。讓我們從齒輪按鈕開始。這是html：

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

和CSS：

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

>您已經閱讀了一兩篇文章，以將表單元素用作JavaScript替代品，那麼您應該已經知道我們需要一起使用輸入和標籤元素，以便如果刪除了兩個元素，則無效。因此，我們有一個帶有AN和一個標籤的複選框輸入，其中符合ID值的屬性。我還添加了一類設置-BTN用於我們的CSS掛鉤。

> 在CSS中，給出標籤的位置：固定聲明，具有適當的方向屬性/值（頂部和右）。

下一

html首先：

和CSS：

框是一個單個DIV元素，其中包含“按鈕 - 版本”和“設置 - 盒元素”。正如我之前所說，後一類主要用於給出元素一個z指數值。 “按鈕 - 包裝器”用於樣式DIV元素。如您所見，DIV的寬度為200px，高度為240px，以適應您在演示中看到的5個按鈕。同樣，為DIV賦予固定權利和適當屬性的位置值。您唯一需要牢記的是，正確的屬性應具有與寬度相同的值，但在負面方面（為了使其從視口消失）。

>

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

>現在讓我們查看剩餘標記的代碼，即5個按鈕。評論表示他們控制的背景樣式：

<span><span>.buttons-wrapper</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: -200px; /* should match element width */
</span>  <span>width: 200px;
</span>  <span>height: 240px;
</span>  <span>background: #fff;
</span><span>}</span>

，這是CSS：

請注意，第一個複選框給出了“檢查”屬性。那是因為我們希望它是默認情況下突出顯示的那個。

>

<span><!-- background styles -->
</span><span><!-- light background (#eaeaea) -->
</span><span><span><span><input</span> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span>
</span><span><span><span><label</span> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Light Background<span><span><span></label</span>></span>
</span>
<span><!-- dark background (#494949) -->
</span><span><span><span><input</span> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Dark Background
<span><span><span></label</span>></span>
</span>
<span><!-- image background -->
</span><span><span><span><input</span> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Image Background<span><span><span></label</span>></span>
</span>
<span><!-- pattern background -->    
</span><span><span><span><input</span> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Pattern Background<span><span><span></label</span>></span>
</span>
<span><!-- hide/show content -->
</span><span><span><span><input</span> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Hide/Show content<span><span><span></label</span>></span></span>

每個輸入字段都有一個ID，每個標籤都有一個屬性，該屬性與其中一個輸入字段的ID匹配。而且，您可能知道或可能不知道，這種技術背後的秘密是屬性，因為當單擊具有for屬性的標籤時，將選擇/檢查與該特定標籤相關的元素，因此，這允許我們使用：檢查的選擇器。

上述所有標籤都有一類“佈局按鈕”。該類用於給按鈕提供默認和常見樣式，例如寬度，填充，邊框等。其他類用於將唯一樣式添加到每個類別中。正如您看到的齒輪圖標和白色框一樣，位置屬性與固定的值以及適當的頂部和正確屬性一起使用。請注意，每個標籤的最高值比以前的標籤大於45px。這是為了使按鈕彼此疊加，而沒有重疊。還請注意，正確的屬性值與按鈕的寬度相同，但為負。

現在看一下我們CSS代碼的最後一部分：

>

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

>上述CSS用於更改與所選廣播按鈕關聯的標籤的默認樣式（我們有4個無線電按鈕）。我使用相鄰的同胞選擇器來定位“無線電”類型的輸入字段之前的每個標籤。因此，如您所見，背景和邊框屬性被賦予值＃E83737（紅色顏色）和顏色屬性為#fff。沒有什麼真正喜歡或複雜的。

HTML中的其餘元素將包裹在DIV中：

>在上面的代碼中註意，我將設置框的每個元素放置在獨立的情況下，我可以將它們全部包裹在DIV或部分元素中，然後將一個單個元素放置，從而使事情變得更簡單。這僅僅是因為您不能選擇父元素，而只有一個兄弟姐妹。

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

> 因此，在這種情況下，所有主要內容都包裹在DIV內。正如您稍後會看到的，要能夠更改此DIV的樣式，我們需要通過編寫與此類似的內容來選擇該div：

>在這裡，我正在使用一般的同級選擇器來選擇主div，這是唯一做到這一點的方法。

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

單擊齒輪圖標

單擊齒輪圖標應使設置框顯示。這是實現這一目標的代碼：

>

>用戶單擊齒輪圖標時，將選擇使用複選框，而魔術則是魔術。單擊齒輪圖標後，將會發生以下內容：

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

>

使用相鄰的兄弟姐妹選擇器（），將選擇該複選框後立即出現的標籤，然後從視口右側移動200個像素。

1. >

   >使用一般同級選擇器〜，將選擇帶有“按鈕- wrapper”和“ butout buttons”類的元素，然後移動，以便它們分別是0個像素和30像素，從視口。

2. 相鄰的同胞選擇器和一般兄弟姐妹選擇器在這裡都是必不可少的，因為沒有它們，此技術將無法使用。

   >

   更改背景

>讓我提醒您無線電按鈕的HTML代碼：>

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

我們將要更改的背景是.main-wrapper元素的背景。這是CSS：

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

>您可以看到，在HTML中，我們有4個輸入元素=“無線電”和4個標籤。當單擊任何標籤時，將選擇與該特定標籤關聯的輸入，因此將與：檢查的偽級相匹配。然後，根據單擊哪個標籤，以上四種樣式之一將應用於主包裝器。

>

>隱藏/顯示內容

>對於顯示/隱藏元素，我正在使用一個複選框：

>

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

，這是CSS：

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

在這種情況下，我們告訴瀏覽器選擇元素並將其設置為顯示：無”當用戶單擊關聯標籤時，因此選擇複選框。

結論

>使用此選擇器技術，您還可以做很多其他事情，而極限是您自己的創造力。如果這項技術對您來說是新的，我希望本文可以作為您嘗試其他可能性的起點。

>

下面您會找到完整的演示：

>請參閱純CSS的筆式切換器，使用：codepen上的sitepoint（@sitepoint）檢查。

>經常詢問的問題（常見問題解答）使用檢查

使用純CS構建樣式切換器

在CSS中檢查的偽級是什麼目的？ ，或用戶選擇的選項元素。它是一個強大的工具，可讓開發人員在不需要JavaScript的情況下創建交互式和動態的網頁。例如，它可用於創建樣式切換器，用戶可以通過選擇不同的選項來更改網頁的外觀。

>

>：檢查偽級工作如何？ ：通過選擇當前選擇或檢查的HTML元素來檢查偽級的作品。它通常與復選框或無線電按鈕之類的形式元素使用。當用戶選擇或檢查以下元素之一時，：檢查的偽級會變得活躍，並將指定的CSS樣式應用於該元素。這可以用來突出顯示所選的選項，顯示或隱藏內容，甚至更改網頁的整個佈局。

>

我可以使用：檢查的偽級與其他html元素？

the：Checked pseudo-class主要用於復選框，無線電按鈕和選項元素等形式元素。但是，它也可以與其他元素一起與HTML5屬性“可滿足”一起使用。這使您可以創建用戶可以編輯的交互式內容，並在“檢查”或“選定”狀態時以不同的方式進行樣式。

>

>如何使用：檢查的偽級來創建樣式切換器？

>使用：檢查的偽級創建樣式切換器，您首先需要使用無線電按鈕或無線電按鈕或每個樣式選項的複選框。然後，在您的CSS中，您將使用：檢查的偽級使用：根據選擇哪個選項來應用不同的樣式。這可能涉及更改網頁外觀外觀的配色方案，字體，佈局或任何其他方面。

>我可以使用：檢查的偽級來創建動態內容嗎？ ：檢查偽級可用於創建動態內容。通過將其與其他CSS選擇器和屬性相結合，您可以根據用戶的選擇顯示或隱藏內容，更改佈局或創建交互式功能。這可以極大地增強用戶體驗，並使您的網頁更具吸引力和交互性。

可以使用：不帶JavaScript的檢查偽級？的：檢查的偽級是，它允許您在不需要JavaScript的情況下創建交互式功能。儘管JavaScript是Web開發的強大工具，但它也可能很複雜且難以使用。 ：檢查的偽級提供了一種更簡單的替代方案，用於創建交互式內容。

如何在不同的瀏覽器中支持的：檢查的偽級？

：：檢查的偽級在所有現代瀏覽器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 8或更早版本中不支持它。因此，如果您需要支持這些較舊的瀏覽器，則可能需要使用基於JavaScript的解決方案。

>

>我可以使用：檢查的偽級對樣式的複選框和無線電按鈕？ >是的，可以使用：檢查的偽級可用於樣式的複選框和無線電按鈕。默認情況下，這些表單元素具有非常基本的外觀，但是使用：檢查偽級，您可以自定義它們的外觀以匹配其餘的網站。當選擇這些元素時，您可以更改顏色，大小，形狀，甚至這些元素的動畫。

>

>：檢查的偽級？檢查偽級通常用於創建交互式功能，例如樣式切換器，手風琴，選項卡和模態。它也可以用於樣式形式形式的元素，例如復選框和無線電按鈕，或者用“可滿足”屬性創建可編輯的內容。它對用戶輸入做出反應的能力使其成為增強用戶體驗的強大工具。

>使用：檢查的偽級

>

>

> >時，是否有任何限製或缺點。它只能選擇當前選擇或檢查的元素，因此不能根據其他狀態或條件來設計元素。此外，Internet Explorer 8或更早版本中不支持它。儘管有這些限制，但它仍然是創建交互式和動態的Web內容的寶貴工具。 >

以上是使用純CSS構建樣式切換器，使用：檢查的詳細內容。更多資訊請關注PHP中文網其他相關文章！