国产一区二区三区成人欧美日韩在线观看 ,99999久久久久久亚洲,欧美老人牲交

CSS實(shí)現(xiàn)可切換圖標(biāo)的開關(guān)組件：利用Checkbox狀態(tài)與可見性控制

花韻仙語

發(fā)布： 2025-10-15 08:39:31

原創(chuàng)

845人瀏覽過

CSS實(shí)現(xiàn)可切換圖標(biāo)的開關(guān)組件：利用Checkbox狀態(tài)與可見性控制

本文詳細(xì)介紹了如何利用css純粹實(shí)現(xiàn)一個(gè)帶有動態(tài)圖標(biāo)的開關(guān)組件。通過隱藏的html `input[type="checkbox"]`元素及其`:checked`偽類，結(jié)合css的相鄰兄弟選擇器和`visibility`屬性，我們能夠精確控制不同svg圖標(biāo)的顯示與隱藏，從而在不使用javascript的情況下，創(chuàng)建出具有視覺反饋的交互式ui元素，同時(shí)避免了`display: none`可能導(dǎo)致的布局跳動問題。

在現(xiàn)代Web開發(fā)中，交互式開關(guān)組件（Toggle Switch）隨處可見，常用于主題切換、功能啟用/禁用等場景。實(shí)現(xiàn)這類組件時(shí)，我們通常希望其在不同狀態(tài)下能展示不同的圖標(biāo)，例如“太陽”和“月亮”圖標(biāo)來表示亮/暗模式。本教程將深入探討如何純粹通過CSS，利用隱藏的checkbox狀態(tài)來驅(qū)動SVG圖標(biāo)的切換，提供一個(gè)高效且易于維護(hù)的解決方案。

核心原理：Checkbox狀態(tài)與CSS選擇器

實(shí)現(xiàn)CSS驅(qū)動的開關(guān)組件，其核心在于利用HTML input[type="checkbox"]的checked狀態(tài)作為UI的“控制器”。當(dāng)checkbox被選中時(shí)，其:checked偽類生效，我們可以通過CSS選擇器來響應(yīng)這一狀態(tài)變化，進(jìn)而改變其他元素的樣式。

本方案的關(guān)鍵技術(shù)點(diǎn)包括：

隱藏Checkbox：將實(shí)際的checkbox元素隱藏，但通過label標(biāo)簽與其關(guān)聯(lián)，使得點(diǎn)擊label即可切換checkbox狀態(tài)，同時(shí)保持可訪問性。
相鄰兄弟選擇器 (+)：利用input[type="checkbox"]與相鄰兄弟元素（通常是包含圖標(biāo)的容器）之間的關(guān)系，通過+選擇器來精確控制其樣式。
visibility屬性：相較于display: none，使用visibility: hidden可以隱藏元素但保留其占據(jù)的空間，這在某些情況下有助于避免布局跳動，實(shí)現(xiàn)更平滑的視覺效果。

HTML結(jié)構(gòu)設(shè)計(jì)

為了實(shí)現(xiàn)帶有圖標(biāo)切換的開關(guān)，我們需要一個(gè)包含checkbox和兩個(gè)圖標(biāo)（例如太陽和月亮）的清晰HTML結(jié)構(gòu)。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

<label class="ThemeToggler" for="ThemeTogglerID">
  <input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS" checked />
  <div class="ThemeTogglerFill" >
    <div class="SunIcon">
      <!-- 太陽SVG圖標(biāo)代碼 -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
        <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
        <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
        <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
        <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
        <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
        <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
        <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
        <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
      </svg>
    </div>
    <div class="MoonIcon">
      <!-- 月亮SVG圖標(biāo)代碼 -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
      </svg>
    </div>
  </div>
</label>

登錄后復(fù)制

<label class="ThemeToggler" for="ThemeTogglerID">: 作為整個(gè)開關(guān)組件的可點(diǎn)擊區(qū)域，通過for屬性與input關(guān)聯(lián)，提升可訪問性。
<input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" ... />: 實(shí)際的開關(guān)狀態(tài)控制器，通過CSS隱藏。
<div class="ThemeTogglerFill">: 開關(guān)的背景軌道和滑動塊的容器，也是圖標(biāo)的父容器。
<div class="SunIcon"> 和 <div class="MoonIcon">: 分別包含太陽和月亮SVG圖標(biāo)的容器。

SCSS樣式實(shí)現(xiàn)

接下來是SCSS代碼，它定義了組件的視覺外觀和交互邏輯。

$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px;
$icon-size: $circle-size - 2px;
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;

// 整體開關(guān)容器樣式
.ThemeToggler {
  width: $width;
  height: $height;
  flex-shrink: 0;
  border-radius: $border-radius;
  background-color: $neutral;
  border: 1px solid $base-100;
  display: inline-block;
  cursor: pointer;
  &:hover {
    border-color: $secondary;
  }
}

// 滑動塊的軌道和動畫
.ThemeTogglerFill {
  position: relative; // 為內(nèi)部圖標(biāo)和滑動塊定位提供參考
  &:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    height: $circle-size;
    width: $circle-size;
    background: $base-300;
    box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
    border-radius: $border-radius;
    transition: background-color 0.25s, transform 0.25s; // 添加動畫
  }
}

// 隱藏Checkbox并控制圖標(biāo)顯示/隱藏
.ThemeTogglerInput {
  display: none; // 隱藏原始checkbox

  // 當(dāng)checkbox被選中時(shí)，滑動塊向右移動
  &:checked ~ .ThemeTogglerFill::before {
    transform: translateX($circle-size);
  }

  // 默認(rèn)狀態(tài)（checkbox未選中）：月亮圖標(biāo)隱藏，太陽圖標(biāo)顯示
  // `+ .ThemeTogglerFill` 表示緊鄰的兄弟元素
  & + .ThemeTogglerFill {
    .MoonIcon {
      visibility: hidden;
    }
    .SunIcon {
      visibility: visible;
    }
  }

  // 當(dāng)checkbox被選中時(shí)：太陽圖標(biāo)隱藏，月亮圖標(biāo)顯示
  &:checked + .ThemeTogglerFill {
    .SunIcon {
      visibility: hidden;
    }
    .MoonIcon {
      visibility: visible;
    }
  }
}

// 圖標(biāo)基礎(chǔ)樣式混合器
@mixin icon {
  position: absolute; // 絕對定位，方便控制圖標(biāo)位置
  display: block;
  width: $icon-size;
  height: $icon-size;
  border-radius: 50%;
  overflow: hidden;
  fill: $base-content; // SVG圖標(biāo)填充色
  transition: visibility 0.25s; // 添加可見性過渡
}

// 太陽圖標(biāo)具體位置
.SunIcon {
  @include icon;
  top: 1.8px;
  left: 1.7px;
}

// 月亮圖標(biāo)具體位置
.MoonIcon {
  @include icon;
  top: 1.8px; // 調(diào)整為與太陽圖標(biāo)相同的top值，或根據(jù)設(shè)計(jì)需求調(diào)整
  left: $circle-size + 1.7px; // 調(diào)整為在右側(cè)顯示
}

登錄后復(fù)制

關(guān)鍵CSS邏輯解釋：

可圖大模型

可圖大模型（Kolors）是快手大模型團(tuán)隊(duì)自研打造的文生圖AI大模型

查看詳情

.ThemeTogglerInput：
- display: none;：徹底隱藏了原生的checkbox。
- &:checked ~ .ThemeTogglerFill::before：當(dāng)checkbox被選中時(shí)，通過通用兄弟選擇器~，找到其后的.ThemeTogglerFill元素，并進(jìn)一步選中其偽元素::before（即滑動塊），然后將其向右平移。
- & + .ThemeTogglerFill：這是實(shí)現(xiàn)圖標(biāo)切換的關(guān)鍵。+是相鄰兄弟選擇器，它會選中緊鄰在.ThemeTogglerInput后面的.ThemeTogglerFill元素。
  - 在此規(guī)則下，我們定義了checkbox未選中時(shí)的圖標(biāo)狀態(tài)：.MoonIcon默認(rèn)隱藏，.SunIcon默認(rèn)顯示。
- &:checked + .ThemeTogglerFill：當(dāng)checkbox被選中時(shí)，同樣通過相鄰兄弟選擇器+選中.ThemeTogglerFill。
  - 在此規(guī)則下，我們定義了checkbox選中時(shí)的圖標(biāo)狀態(tài)：.SunIcon隱藏，.MoonIcon顯示。
@mixin icon 和 .SunIcon, .MoonIcon：
- position: absolute;：圖標(biāo)采用絕對定位，這樣它們可以獨(dú)立于文檔流，并精確地放置在.ThemeTogglerFill容器內(nèi)。
- visibility屬性：
  - visibility: hidden;：使元素不可見，但其占據(jù)的空間仍然保留在布局中。這與display: none;（會完全移除元素及其空間）不同。對于這種切換圖標(biāo)的場景，visibility可以提供更平滑的過渡效果，避免布局跳動。
  - visibility: visible;：使元素可見。
  - transition: visibility 0.25s;：為visibility屬性添加過渡效果，雖然visibility本身不支持平滑過渡，但它可以在visible和hidden之間瞬間切換，而其他屬性（如opacity）則可以平滑過渡。在此處，如果希望有更平滑的出現(xiàn)/消失效果，可以結(jié)合opacity進(jìn)行過渡。

注意事項(xiàng)：

SVG圖標(biāo)的定位：SunIcon和MoonIcon都使用了position: absolute;。它們的top和left值需要根據(jù)實(shí)際設(shè)計(jì)進(jìn)行調(diào)整，以確保圖標(biāo)在開關(guān)的不同狀態(tài)下能正確地顯示在滑動塊的對應(yīng)位置。示例代碼中對MoonIcon的left值進(jìn)行了調(diào)整，使其在被選中時(shí)顯示在右側(cè)。
~ 與 + 選擇器：
- ~ (通用兄弟選擇器)：選擇所有位于指定元素之后，并且是其兄弟元素的元素。
- + (相鄰兄弟選擇器)：只選擇緊鄰在指定元素之后的那個(gè)兄弟元素。在我們的HTML結(jié)構(gòu)中，.ThemeTogglerFill是.ThemeTogglerInput的緊鄰兄弟，所以使用+選擇器是準(zhǔn)確且高效的。
可訪問性：label標(biāo)簽與input的id關(guān)聯(lián)是確保屏幕閱讀器等輔助技術(shù)能夠正確識別和操作開關(guān)的關(guān)鍵。
SVG填充色：SVG圖標(biāo)的fill屬性可以直接在CSS中控制，這使得圖標(biāo)的顏色可以輕松地與主題色保持一致。

總結(jié)

通過上述CSS和HTML結(jié)構(gòu)，我們成功創(chuàng)建了一個(gè)純CSS驅(qū)動的開關(guān)組件，它能夠根據(jù)checkbox的選中狀態(tài)動態(tài)切換SVG圖標(biāo)。這種方法避免了JavaScript的介入，使得組件更加輕量、高效，并且易于維護(hù)。利用visibility屬性而非display: none，可以在某些場景下提供更優(yōu)的用戶體驗(yàn)，減少布局重排。掌握這種技術(shù)，能夠幫助開發(fā)者構(gòu)建更具交互性和視覺吸引力的純CSS UI組件。

以上就是CSS實(shí)現(xiàn)可切換圖標(biāo)的開關(guān)組件：利用Checkbox狀態(tài)與可見性控制的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：