How to change the style of the checkbox fields and provide a totally different look to these form controls through CSS.

The checkbox fields are very complicated when it comes to manipulate default styles from the browser. In fact, they don’t respond to most style attributes, so you have to figure out how to make these elements look different on web pages.

However, by hiding the browser’s default interface, we can then apply our own CSS styles to checkbox fields and get where we want in terms of design.

Hide the default interface with appearance: none

The first step to change the style of a checkbox is to use the CSS appearance attribute, assigning the value none.

mycheck { appearance: none; }

This attribute does not work like a “display: none”, which would simply make the element not appear on the page, preventing any checkbox function. Instead “appearance: none;” It is used to remove the default interface of the checkbox, although the element remains on the page and continues to work the same, although without styles.

In summary, you can understand appearance: none as a total reset to the default styles of the checkbox, or any other form element.

Apply CSS to the checkbox

Now comes the most interesting part, which is apply some different styles to our checkbox.

Among all the styles proposed below, we want to highlight several things:

We will apply a background color to our checkbox
We will apply a width and height size
Optionally we will place a border, a rounding or any other customization that we need.
The internal drawing of the checkbox that will appear when confirming it, we will place it as a background imagethrough a svg.

The internal drawing of the checkbox will be typical confirmation iconwhich in some countries is called “pomfret“Very appropriately.

.mycheck { cursor: pointer; background-color: #fff; background-image: url(“data:image/svg+xml,%3csvg viewBox=’0 0 16 16′ fill=”white” xmlns=”http://www.w3.org/2000/svg”%3e% 3cpath d=’M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z’/%3e %3c/svg%3e”); width: 48px; height: 48px; appearance: none; border: 2px solid #888; }

The styles can of course be variable depending on the design we want to reach. However, the important thing is that the color of the background is the same as the color of the SVG, so that the confirmation is not visible when it is not checked. In this case the background is white and the SVG is white as well.

In the HTML we simply have to make sure that we use the class that we have defined for this custom checkbox.

I want to learn css

Styles when the checkbox is checked with :checked

The next step is to use :checked to apply styles at the time the checkbox has been confirmed. You probably already know :checked, but if not, it’s a CSS pseudo-class that allows you to apply styles when the element has a checked state.

.mycheck:checked { background-color: rgb(236 72 153); }

As you are seeing, the effect consists simply in changing the background color of the checkbox interface, so that you can see the SVG that we have used as background image in the design.

Completing the styles of the checkbox

From here we would have to apply other styles to the element, using other pseudo classes such as :focus, which will be very useful to improve the accessibility of this form element, indicating to the user that the focus of the application is on it.

CSS animations for the checkbox

Now that we have control over the checkbox styles, we are going to apply some simple animations to bring a little more brilliance to our design.

We’ll do it with a simple transition of the background color of the confirmation box.

.mycheck { transition: background-color 0.3s ease-in-out; }

The full style would now be as follows.

We can go a bit further in the animation by allowing the thumbstick to move in and out with an offset, which will increase the visual appeal of the transition. For this we will make a translation of the background image, with a change between the style checked or not.

We are going to leave here the code of a second alternative checkbox style, with a more complete animation.

.mycheck2 { display: inline-flex; align-items: center; cursor: pointer; background-color: #fff; color: #fff; background-image: url(“data:image/svg+xml,%3csvg viewBox=’0 0 16 16′ fill=”white” xmlns=”http://www.w3.org/2000/svg”%3e% 3cpath d=’M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z’/%3e %3c/svg%3e”); width: 24px; height: 24px; appearance: none; border: 2px solid #888; background-position: 0 -2rem; background-size: 100%; background-repeat: no-repeat; transition: all 0.3s ease-in-out; } .mycheck2:checked { background-color: rgb(75, 156, 13); colour: rgb(75, 156, 13); background-position: 0 0; }

Conclusion and complete example

Now to finish, we are going to show the complete detail that we have prepared for this article, which consists of the HTML and CSS code that you will have to use to customize the appearance of the CSS, obviously changing what you deem appropriate so that it adapts to your design. .

Customize an input checkbox with CSS

Customize a checkbox element with CSS

I want to learn css

I want the sun to rise< /label>

This checkbox is disabled

< p> This checkbox is disabled but checked

We hope this article has been useful for you to change the CSS styles of the checkbox fields. I will end by thanking , which is where I have seen the styles that they used to improve their checkboxes, through their official plugin for forms, which inspired me to write this article.

…