Fun Times Styling Checkbox States

In web design, we may ignore the style of text input boxes, links, and even buttons, but the check boxes are different. Therefore, the style design of the checkbox always brings freshness.

While the checkbox design is not complicated, we don't have to be limited to simple background color changes or adding/removing borders to indicate state changes. Excellent results can be easily achieved without superb design skills. This article will demonstrate several methods for you.

Basic knowledge

In the following example, the check box basically adopts a three-layer layout: the bottom is the check box and the top is two superimposed elements or pseudo-elements. Depending on which element is visible, it indicates the selected or unchecked status of the check box.

In the code, all layouts (including check boxes) use grids. You can choose other suitable layouts according to the actual situation. More instructions for the code and design are in the code comments.

Additionally, any element superimposed on the top of the check box has pointer-events: none set to avoid blocking users from clicking or clicking the check box.

Now, let's look at the first approach.

Method 1: Mix background as status indicator

Hybrid mode in CSS is a versatile technology. Manipulating colors relative to two or more elements or backgrounds is very useful in some unexpected scenarios.

The check box is an example.

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

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

In this example, I set the pseudo-elements of the checkbox to green and blue, respectively, superimpose them together, and set mix-blend-mode value for each element. This means that the background of each element is mixed with its background color.

I used the hard-light value, which simulates multiplication or filtering effects based on whether the top color is dark or light. You can dig deep into the different hybrid modes on MDN.

When the check box is selected, mix-blend-mode value of the ::after pseudo-element is set to unset , resulting in different visual effects.

Method 2: Create 3D animation

Animating color blocks is fun. It would be better if it made look 3D. CSS can simulate 3D spatial rendering elements. So we can create a 3D box and rotate it to indicate the change in the checkbox state.

<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;
  /*More styles*/
}
/*front*/
.c-checkbox > div > i:first-child {
  background: #ddd;
  transform: translateZ( -10px );
}
/*back*/
.c-checkbox > div > i:last-child {
  background: blue;
  transform: translateZ( 10px );
}
/*side*/
.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;
}

After the check box<div> The element becomes a 3D space container—after which <code>transform-style: preserve-3d; child elements can be placed along the x, y and z axes—using the transform attribute, we place two on the z axis<i></i> elements (gray and blue), there is a certain distance between them. Two other elements sandwiched between them, covering their left and right sides. It's like a cardboard box that is covered with the top and bottom except for the top and bottom.

When the check box is selected, this gray and blue box rotates sideways to the other side. Since I've already<div> Added transitions so its rotation is animated.<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">Copy after login</div></div> <h3> Method 3: Use rounded corners</h3> <p> Change the rounded corners of the checkbox? Nothing interesting. Change the rounded corners of other check boxes nearby? This is a bit interesting.</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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> input { background: #ddd; border-radius: 20px; /*More styles*/ } input:not(:first-of-type)::before { content: ''; transform: translateY(-60px); /*Move one line up*/ 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; } /* Between the second and last checkboxes*/ input:nth-of-type(4):checked * input:checked { border-top-left-radius: unset; border-top-right-radius: unset; }</pre><div class="contentsignin">Copy after login</div></div> <p> If you have interacted with the demo before, you will notice that when you click or click a checkbox, it can not only change its own border, but also the borders of its front and back checkboxes.</p> <p> Now, we have no selector to select the previous element, only the following element. Therefore, the way we control the appearance of the previous checkbox is to use the pseudo-element of the checkbox to style its previous checkbox. Each other checkbox except the first checkbox will get a pseudo-element that is moved to the top of the checkbox in front of it.</p> <p> Suppose the check boxes A, B, and C are arranged one by one. If I click on B, I can change the appearance of A by setting the pseudo-element of B, change the appearance of B by setting the pseudo-element of C, and change the appearance of C by setting the pseudo-element of D.</p> <p> Starting from B, the pseudo-elements of B, C, and D are accessible—as long as the next element selector can use between them in the layout.</p> <p> The four corners of each check box are initially rounded when selected and unchecked. However, if a check box is selected, the top corners of the next check box and the bottom corners of the front check box will become straight (by overwriting and deleting their rounded corners).</p> <h3> Method 4: Use CSS mask</h3> <p> Toggle buttons… as far as code is concerned, they are check boxes too. So we can design these checkboxes as toggle buttons, which can be done using a CSS mask. In short, this is a technique to use images to filter their background parts.</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">Copy after login</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">Copy after login</div></div> <p> Two skins (showing landscape photos) are located at the top of the check box. The top one gets a <code>mask-image shaped like a typical toggle button — on the left is a transparent circle and the rest is completely opaque in color. Through the transparent circle, we can see the photo below, while the rest of mask-image displays the photo at the top.

When the check box is clicked, the transparent circle moves to the right, so we can see the image at the top through the circle, while the rest shows the photo at the bottom.

 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);
}

Method 5: Use box shadow

Finally, let's look at the easiest — but I think it's also the most effective — approach: the shadows inside the animation.

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

 input {
  transition: box-shadow .3s;
  background: lightgrey;
  /*More styles*/
}
input:checked { 
  box-shadow: inset 0 0 0 20px blue;
}

Some CSS properties can be animated by default, one of which is box-shadow . This subtle animation is perfect for minimalist themes.

That's it! I hope this inspires you next time you work on a checkbox. CSS provides us with many possibilities to indicate changes in states, so have fun and share if you have any interesting ideas.