Customize radio/multi-selection box styles with pure CSS3

  css3

In front-end development, it is often necessary to modify the style of default elements. However, it is not so easy to find the corresponding style for some elements. The key content to be discussed today is<input type="checkbox">as well as<input type="radio">The style modification of these two default form elements.


We use check boxes<input type="checkbox">For example.
In webkit kernel browsers such as chrome, the default style with the checkbox unchecked is as follows:
图片描述
After selection, the following figure is shown:
图片描述
Well, it’s pretty ugly …
What should we do if we want to make style changes to it? As a rule, let’s look at what properties its default style has:
图片描述
Inuser agent stylesheet, which is the default style of the browser, its properties are not complicated and are all common contents. We can modify its size, color, border, etc. by overlaying these styles. However, the hook in the middle does not seem to directly cover the modified style. Is this really the case?

We noticed that there is a relatively uncommon attribute.-webkit-appearance, literally translated as “webkit look”, seems to be related to the webkit kernel browser style customization? We now know what attribute this is. In w3cschool, we can see the following explanation:

Definition and usage
The appearance property allows you to make an element look like a standard user interface element.
Default value: normal
Inheritance: no
Version: CSS3 JavaScript
Syntax: object.style.appearance = “button”

Browser support
All mainstream browsers do not support the appearance property.
Firefox supports the alternate -moz-appearance attribute.
Safari and Chrome support the alternate -webkit-appearance attribute.

appearance: normal|icon|window|button|menu|field;

As expected, it does have something to do with style customization. However, the explanation only extracts “what it looks like to change one element into another”, but it does not tell us how to “change the √” in the check box to “×”.
Don’t worry, let’s try to modify this attribute first:
图片描述
Simply and roughly set the style directly tonone, look at the effect:
图片描述
It’s gone! !
Wait, does this mean that we can completely customize it? For example, we want to change its default “√” into something else.
Font-awesome is a set of beautiful font icons. Now I want to put its icon in this check box.


First, introduce the css file of font-awesome, not to mention more.

Then let’s style this checkbox “Unchecked Status”:

input[type=checkbox] {
 display: inline-block;
 height: 20px;
 width: 20px;
 border: 1px solid #000;
 overflow: hidden;
 vertical-align: middle;
 text-align: center;
 -webkit-appearance: none;
 font: normal normal normal 14px/1 FontAwesome;
 outline: 0;
 background: 0 0;
 }

The above code sets the width and height, border background and other styles for the unchecked state of the check box. Note that there are two key points here, one of which is what we have already discussed.-webkit-appearanceTo set it tononeThe reason for this is to erase it completely, which is what I mean by drawing it myself. The second isfont: normal normal normal 14px/1 FontAwesome, which defines the font attributes for this check box, as a prerequisite for the following reference font-awesome.
Now it looks like this:
图片描述

Next, let’s define the “selected” style, which we can use:beforeOr ..:afterPseudo-element implementation.

Because we have already used it-webkit-appearanceErase all styles, including the “√” in the middle, so we can draw one by ourselves. Pseudo-elements are a very useful method.

input[type=checkbox]:checked:after {
 content: '\f00c';
 font-size: 15px;
 text-align: center;
 line-height: 17px;
 color: #000;
 }

Herecontent: '\f00c'It is the icon font number from font-awesome. Specific search can be made on its official website, or simply and roughly open the console in the official website example to check, for example:
图片描述

At this stage, we have already accomplished our mission. Let’s see the effect quickly.
图片描述
图片描述
Meimei da!
At this point, we have completed all the tasks of setting the default check box style through pure CSS3.
Other things like buttons and radio boxes are the same ~
Due to limited time, I have not tested Firefox and Safari browsers for the time being. If there are students who have been tested, please comment and communicate downstairs! Due to limited compatibility, this customized scheme can be used as a reference, and the specific use still depends on the needs of the occasion.

Welcome to my personal front-end technology blog:http://jrainlau.github.io/

Thanks for reading, see ya next time!