有趣的时代样式复选框状态

网页设计中，我们可能忽略文本输入框、链接甚至按钮的样式，但复选框却不同。因此，复选框的样式设计总能带来新鲜感。

虽然复选框设计并不复杂，但我们不必局限于简单的背景颜色变化或添加/移除边框来表示状态变化。无需高超的设计技巧，也能轻松实现出色的效果。本文将为您演示几种方法。

基础知识

以下示例中，复选框基本采用三层布局：底部是复选框，顶部是两个叠加的元素或伪元素。根据哪个元素可见，来指示复选框的选中或未选中状态。

在代码中，所有布局（包括复选框）都使用了网格。您可以根据实际情况选择其他合适的布局。代码和设计方案的更多说明在代码注释中。

此外，叠加在复选框顶部的任何元素都设置了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盒子并旋转它来指示复选框状态的变化。

  

<i></i><i></i><i></i><i></i>


<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为我们提供了许多指示状态变化的可能性，所以尽情享受乐趣吧，如果您有任何有趣的想法，请分享。