有趣的時代樣式複選框狀態

網頁設計中，我們可能忽略文本輸入框、鏈接甚至按鈕的樣式，但複選框卻不同。因此，複選框的樣式設計總能帶來新鮮感。

雖然複選框設計並不復雜，但我們不必局限於簡單的背景顏色變化或添加/移除邊框來表示狀態變化。無需高超的設計技巧，也能輕鬆實現出色的效果。本文將為您演示幾種方法。

基礎知識

以下示例中，複選框基本採用三層佈局：底部是複選框，頂部是兩個疊加的元素或偽元素。根據哪個元素可見，來指示複選框的選中或未選中狀態。

在代碼中，所有佈局（包括複選框）都使用了網格。您可以根據實際情況選擇其他合適的佈局。代碼和設計方案的更多說明在代碼註釋中。

此外，疊加在復選框頂部的任何元素都設置了pointer-events: none ，以避免阻止用戶點擊或點擊複選框。

現在，讓我們來看第一種方法。

方法一：混合背景作為狀態指示

CSS中的混合模式是一種多功能技術。操作相對於兩個或多個元素或背景的顏色，在一些意想不到的場景中非常有用。

複選框就是一個例子。

 <label for="un">un</label>

 input[type=checkbox]::before,
input[type=checkbox]::after {
  mix-blend-mode: hard-light;
  pointer-events: none;
  /*更多樣式*/
}
input[type=checkbox]::before {
  background: green;
  content: '✓';
  color: white;
  /*更多樣式*/
}
input[type=checkbox]::after {
  background: blue;
  content: '⨯';
  /*更多樣式*/
}
input[type=checkbox]:checked::after {
  mix-blend-mode: unset;
  color: transparent;
}

在這個示例中，我將復選框的偽元素分別設置為綠色和藍色，疊加在一起，並為每個元素設置了mix-blend-mode值。這意味著每個元素的背景與其背景色混合。

我使用了hard-light值，它根據頂部顏色是深色還是淺色，模擬乘法或濾色效果。您可以在MDN上深入了解不同的混合模式。

選中復選框時， ::after偽元素的mix-blend-mode值被設置為unset ，從而產生不同的視覺效果。

方法二：創建3D動畫

動畫化顏色塊很有趣。如果使其看起來是3D的，效果會更好。 CSS可以模擬3D空間渲染元素。因此，我們可以創建一個3D盒子並旋轉它來指示複選框狀態的變化。

<div>
  <div>
<i></i><i></i><i></i><i></i>
</div>
</div>
<label for="un">un</label>

 .c-checkbox > div {
  transition: transform .6s cubic-bezier(.8, .5, .2, 1.4);
  transform-style: preserve-3d;
  pointer-events: none;
  /*更多樣式*/
}
/*正面*/
.c-checkbox > div > i:first-child {
  background: #ddd;
  transform: translateZ( -10px );
}
/*背面*/
.c-checkbox > div > i:last-child {
  background: blue;
  transform: translateZ( 10px );
}
/*側面*/
.c-checkbox > div > i:nth-of-type(2),
.c-checkbox > div > i:nth-of-type(3) {
  transform: rotateX(90deg)rotateY(90deg);
  position: relative;
  height: 20px;
  top: 10px;
}
.c-checkbox > div > i:nth-of-type(2) {
  background: navy;
  right: 20px;
}
.c-checkbox > div > i:nth-of-type(3) {
  background: darkslategray;
  left: 20px;
}

複選框後的<div>元素變成了一個3D空間容器——在其設置了<code>transform-style: preserve-3d;之後，子元素可以沿著x、y和z軸放置——使用transform屬性，我們在z軸上放置兩個<i></i>元素（灰色和藍色），它們之間有一定的距離。另外兩個元素夾在它們之間，覆蓋它們的左右兩側。這就像一個除了頂部和底部都被覆蓋的紙板箱。

選中復選框時，這個灰色和藍色的盒子會側向旋轉到另一側。由於我已經向<div>添加了過渡，因此它的旋轉是動畫化的。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> input:checked div { transform: rotateY( 180deg ); }</pre><div class="contentsignin">登入後複製</div></div> <h3 id="方法三-使用圓角">方法三：使用圓角</h3> <p>更改選中復選框的圓角？沒什麼意思。更改附近其他復選框的圓角？這就有點意思了。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;label for=&quot;un&quot;&gt;un&lt;/label&gt;</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> input { background: #ddd; border-radius: 20px; /*更多樣式*/ } input:not(:first-of-type)::before { content: ''; transform: translateY(-60px); /*向上移動一行*/ pointer-events: none; } input:checked * input::before, input:last-of-type:checked { border-radius: 20px; background: blue; } input:checked * input:checked * input::before { border-top-left-radius: unset !important; border-top-right-radius: unset !important; } input:checked::before { border-bottom-left-radius: unset !important; border-bottom-right-radius: unset !important; } /*第二個和最後一個複選框之間*/ input:nth-of-type(4):checked * input:checked { border-top-left-radius: unset; border-top-right-radius: unset; }</pre><div class="contentsignin">登入後複製</div></div> <p>如果您之前與演示互動過，您會注意到，當您點擊或點擊複選框時，它不僅可以更改它自己的邊框，還可以更改其前後復選框的邊框。</p> <p>現在，我們沒有選擇器可以選擇前面的元素，只有後面的元素。因此，我們控制前面複選框外觀的方法是使用複選框的偽元素來設置其前面複選框的樣式。除了第一個複選框外，其他每個複選框都會得到一個偽元素，該偽元素被移動到其前面複選框的頂部。</p> <p>假設複選框A、B和C一個接一個排列。如果我點擊B，我可以通過設置B的偽元素來更改A的外觀，通過設置C的偽元素來更改B的外觀，通過設置D的偽元素來更改C的外觀。</p> <p>從B開始，B、C和D的偽元素是可訪問的——只要下一個元素選擇器可以在佈局中使用它們之間。</p> <p>每個複選框的四個角在選中和未選中時最初都是圓角的。但是，如果選中一個複選框，則下一個複選框的頂部角和前面複選框的底部角將變直（通過覆蓋和刪除它們的圓角）。</p> <h3 id="方法四-使用CSS遮罩">方法四：使用CSS遮罩</h3> <p>切換按鈕……就代碼而言，它們也是複選框。因此，我們可以將這些複選框設計成切換按鈕，這可以使用CSS遮罩來完成。簡而言之，這是一種使用圖像過濾其背景部分的技術。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">登入後複製</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.one.skin { background: no-repeat center -40px url('photo-1584107662774-8d575e8f3550?w=350&amp;q=100'); } .two.skin { background: no-repeat center -110px url('photo-1531430550463-9658d67c492d?w=350&amp;q=100'); --mask: radial-gradient(circle at 45px 45px , rgba(0,0,0,0) 40px, rgba(0,0,0,1) 40px); mask-image: var(--mask); -webkit-mask-image: var(--mask); }</pre><div class="contentsignin">登入後複製</div></div> <p>兩個皮膚（顯示風景照片）位於復選框的頂部。最上面的一個獲得一個形狀像典型切換按鈕的<code>mask-image ——左側是一個透明的圓圈，其餘部分是完全不透明的顏色。通過透明的圓圈，我們可以看到下面的照片，而其餘的mask-image顯示頂部的照片。

點擊複選框時，透明圓圈會移動到右側，因此我們可以通過圓圈看到頂部的圖像，而其餘部分顯示底部的照片。

 input:checked ~ .two.skin {
  --mask: radial-gradient(circle at 305px 45px, rgba(0,0,0,1) 40px, rgba(0,0,0,0) 40px);
  mask-image: var(--mask); -webkit-mask-image: var(--mask);
}

方法五：使用盒子陰影

最後，讓我們來看最簡單——但我認為也是最有效——的方法：動畫內陰影。

 <label for="un">un</label>

 input {
  transition: box-shadow .3s;
  background: lightgrey;
  /*更多樣式*/
}
input:checked { 
  box-shadow: inset 0 0 0 20px blue;
}

有些CSS屬性可以默認動畫化，其中之一是box-shadow 。這種細微的動畫非常適合極簡主題。

就是這樣！我希望這能激發您下次處理複選框時的靈感。 CSS為我們提供了許多指示狀態變化的可能性，所以盡情享受樂趣吧，如果您有任何有趣的想法，請分享。