It is virtually impossible to style radio buttons and checkboxes using CSS. They assume by default the look of the relevant browser or operating system. In many cases, this is also what you are looking for as these elements are familiar to users and can be immediately recognized. However, in some cases, it may be beneficial for you to adapt these interface elements to your own design concept.
There is a simple trick for doing this. You hide the actual checkbox and replace it with any of your own graphics (or with a character from Font Awesome for example).
The key techniques used for this:
<label>, which can be used to check checkboxes and radio buttons even if they are not visible;
You will find exercise files in the support material under
Open the files checkboxes.html and checkboxes.css. The HTML code is as follows:
In a form with the ID form, there are three checkboxes each with their own ID, which allows you to link them with their relevant label. This is an absolute requirement for the whole thing to function properly as it allows you to check the boxes by clicking on the label.
Now let’s create the CSS. The first thing we do is to hide the “real” checkboxes. You can do this any way, but not by using display:none, as this makes some browsers think that the checkboxes do not exist, in which case they would be disabled. One good option is visibility:hidden. However, an element that is hidden in this manner still needs space. This means that it can displace other elements, thus affecting the layout. We can resolve this issue quite simply by using position:absolute. As a result, the invisible checkboxes are shifted to a new level and the other elements are no longer affected.
So, insert the following in checkboxes.css:
The preceding selector #form is not absolutely necessary, but it ensures, in practice, that the formatting does not affect all the checkboxes on the whole website.
The next step involves attaching the graphics to the remaining elements: the labels. The names of the graphics are square.png and square-checked.png, and they are located in the folder images within the folder css3_advanced. The default graphic for the unchecked checkboxes comes first.
Using margin-right provides sufficient space between the checkboxes and the text.
There is still no checked checkbox. This is where the :checked pseudo-class comes into play. This allows you to style checkboxes (and radio buttons) differently if they are checked:
The selector means (when read from back to front): “Insert an image before the label (label::before), which comes after (+) a checked (:checked) checkbox that is located inside the element #form.”
You are now done. The checkboxes that you have designed now behave in exactly the same way as the real ones.
In the same way, you can even style the popular on/off switches that are used instead of traditional checkboxes on iOS devices (and currently in many web-based applications as well).
The exercise files can be found in the support material under
Open the files switch.html and switch.css. The HTML code is quite simple:
The HTML code doesn’t require any further modification. You can now use this to create the switch in the switch.css file.
First hide the “real” checkbox again.
The label forms the switch’s oval background. The properties you need to do this include background-color, border-radius, width, and height. The easiest way to continue the design is if the element is exactly twice as wide as it is high. Tip: If you define all the sizes in em (and as a percentage), you can scale the switch however you want at the end using the font-size property.
The switch’s actual label (in this case “Wi-Fi”) is formed by the
<span>element inside the label. Absolute positioning is a
good approach here.
The movable button is inserted again using ::before or ::after. Use absolute positioning here as well.
Now change the relevant properties for the background and button if the checkbox is checked.
Lastly, define a transition so that the movement of the button can be animated.
Tip: In the case of the timing function for the transition, you can, instead of using the preset values (e.g. linear or ease-out), also specify your own curves. These are Bezier curves that some of you are perhaps already familiar with from vector graphics programs, such as Adobe Illustrator. You define these curves based on four points:
They are inserted in CSS as follows:
This gives us, for instance:
The second and fourth points can also have values that are smaller than 0 or larger than 1. This enables you to create a “rubber band effect”. The animation first runs briefly in the opposite direction or beyond the destination. In the case of our switch, the button would visually “snap” into place.
There are a few useful graphics tools available on the web that you can use to create the code, such as at https://matthewlein.com/ceaser/. You can adjust the curve visually using direction handles known from graphics programs. The curve input above appears as follows: