Styling checkbox)

Check box checkbox is a common control for Web applications, which can be seen everywhere. The native check box control is generally like the following:

Selected statusUnselected status

This depends on the operating system and browser. Sometimes, this style does not meet the design requirements. In this case, you need a more refined checkbox style. In the past, only a few browsers were able to apply styles to such controls. For example, to obtain a design drawing:

Blue.png

In the past, it was impossible to achieve this design by simply modifying the style. However, with the powerful css3 attribute appearance, this type of control can have unprecedented style control capabilities:

input[type="checkbox"] {  -webkit-appearance: none;}

In this way, set the property valuenoneThe original Rendering Method of the check box is removed and becomes an ordinary element. Then, you can apply the style to it and add the following style:

input[type="checkbox"] {  -webkit-appearance: none;  background: #fff url(i/blue.png);  height: 22px;  vertical-align: middle;  width: 22px;}

By combining the State pseudo-class selector:checkedYou can set different styles for the checkbox in the selected status to Visually differentiate them:

input[type="checkbox"]:checked {  background-position: -48px 0;}

Click the check box to see the change effect of the style of the check box. In addition, you must add the style with the focus, disable, and other States as shown in the Design Image:

input[type="checkbox"]:focus,input[type="checkbox"]:hover {  background-position: -24px 0;  outline: none;}input[type="checkbox"]:checked {  background-position: -48px 0;}input[type="checkbox"][disabled] {  background-position: -72px 0;}input[type="checkbox"][disabled]:checked {  background-position: -96px 0;}

Because the image has already been merged into one, you can simply modify it.background-positionThat's it. At the same time, the priorities (weights) of the previous selectors are the same, so the order of writing is very important.

Compatibility

Currently, it is only compatible with WebKit series browsers.-moz-appearanceHowever, the original background color and border style of the control cannot be modified, and it is not easy to use for the time being. The IE series does not support this attribute currently. For more details about compatibility, see caniuse/appearance. Therefore, you need to clear the background image for the IE browser:

input[type="checkbox"] {  background: #fff url(i/blue.png);  background: none\0;  *background: none;  ...}

To be compatible with more mainstream browsers, you need to find another solution. In all mainstream browsers, clicking the label associated with a check box produces the same effect as the clicking element, switches the selected status of the check box control. This behavior of the browser gives us a crucial hook. Since the label element can be used to control the status of native check boxes, you do not need to directly operate the actual check box elements, move the operation and style to the associated label element:

<input id="example" type="checkbox"><label for="example"></label>

Make sure thatforAttribute Value and check box inputidThe value is consistent, and the label element is placed after the input, so that CSS can locate the label element and apply the style through the adjacent sibling selector:

input[type="checkbox"] + label:before {  background: #fff url(i/blue.png);  content: " ";  height: 22px;  left: 0;  position: absolute;  width: 22px;}

With the style label element to provide interaction, the native checkbox control is a little redundant, although it can be useddisplay: noneHide it, but the hidden form elements cannot get the focus, so the best way is to use the label element to hide it. This not only supports keyboard interaction, at the same time, when the image loading fails, the native control can be ensured:

input[type="checkbox"] {  box-sizing: border-box;  left: 4px;  margin: 0;  padding: 0;  position: absolute;  top: 3px;}

Images must be able to completely block the native checkbox control, because absolute positioning is used here, so you need to add a Positioning Reference:

<!-- HTML --><div class="checkbox">  <input id="exampleCheckbox" type="checkbox">  <label for="exampleCheckbox"></label></div>/* CSS */.checkbox {  min-height: 24px;  padding-left: 24px;  position: relative;}

The reserved padding on the left is used to make the layout more beautiful. At the same time, it matches the style in other States as before:

input[type="checkbox"]:focus + label:before,input[type="checkbox"] + label:hover:before {  background-position: -24px 0;}input[type="checkbox"]:checked + label:before {  background-position: -48px 0;}input[type="checkbox"][disabled] + label:before {  background-position: -72px 0;}input[type="checkbox"][disabled]:checked + label:before {  background-position: -96px 0;}

Compatibility

As long as the browsers supporting css3 selectors are basically compatible, they also have the vast majority of Interaction Features of native controls. Not supported by IE 8:checkedPseudo-class selector that combines pseudo elements:beforeChange to double colon::beforeYou can remove the impact on IE 8:

input[type="checkbox"] + label::before { ... }

For compatibility with pseudo-element-generated content, see CSS generated content for pseudo-elements. It is true that the above method assumes support:checkedThe browser of the pseudo-class selector also supports double-colon pseudo-element writing, but does not support any browsers. This is not a good method. This assumption is actually incorrect, some old browsers are unavailable.:not()The selector is more reasonable.:not(:checked)To add a style for the unselected control,:not()And:checkedThe same standard css3-selectors, the compatibility should be consistent with css3 selectors. However, the writing style is somewhat changed,:checkedAnd:not(:checked)You must add the following basic styles:

input[type="checkbox"]:checked + label:before,input[type="checkbox"]:not(:checked) + label:before {  background: #fff url(i/blue.png);  content: " ";  height: 22px;  left: 0;  position: absolute;  width: 22px;}input[type="checkbox"]:not(:checked):focus + label:before,input[type="checkbox"]:not(:checked) + label:hover:before {  background-position: -24px 0;}input[type="checkbox"]:checked + label:before {  background-position: -48px 0;}input[type="checkbox"][disabled]:not(:checked) + label:before {  background-position: -72px 0;}input[type="checkbox"][disabled]:checked + label:before {  background-position: -96px 0;}

View simple examples, which are not supported:checkedThe browser of the pseudo-class selector (such as IE 8) can use JavaScript to modify the true class attribute based on the control status to distinguish different states, for example, you can add or deletecheckedClass:

// jQuery$(‘input[type="checkbox"]‘).on(‘change‘, function() {  $(this)[$(this).prop(‘checked‘) ? ‘addClass‘ : ‘removeClass‘](‘checked‘);});/* CSS */input[type="checkbox"].checked + label:before { ... }

With the previous foundation, it is also very easy to make controls similar to the switch button, or you are familiar with the structure:

<div class="checkbox">  <input id="example" type="checkbox">  <label for="example">Check</label></div>

First, outline the switch shape. Place a circular button in the middle of a rounded rectangle:

input[type="checkbox"]:checked + label,input[type="checkbox"]:not(:checked) + label {  background-color: #e0e0e0;  border-radius: 24px;  cursor: pointer;  display: inline-block;  height: 24px;  position: relative;  text-indent: -9999px;  width: 48px;}input[type="checkbox"]:checked + label:after,input[type="checkbox"]:not(:checked) + label:after {  background-color: #fff;  border-radius: 20px;  content: " ";  height: 20px;  left: 2px;  position: absolute;  top: 2px;  width: 20px;}

You only need to modify the background color of the box and the position of the intermediate button:

input[type="checkbox"]:checked + label {  background-color: #8c8;}input[type="checkbox"]:checked + label:after {  left: 26px;}

However, this kind of hop type change is too stiff. The point transition effect is added, and it looks smoother:

input[type="checkbox"]:checked + label,input[type="checkbox"]:not(:checked) + label {  -webkit-transition: background-color 0.3s;          transition: background-color 0.3s;}input[type="checkbox"]:checked + label:after,input[type="checkbox"]:not(:checked) + label:after {  -webkit-transition: left 0.3s;          transition: left 0.3s;}

Click to see the effect.CSS3 TransformsTo replaceleftBetter results and faster speed:

input[type="checkbox"]:checked + label:after,input[type="checkbox"]:not(:checked) + label:after {  -webkit-transition: left -webkit-transform 0.3s;       -o-transition:           -o-transform 0.3s;          transition: left         transform 0.3s;}input[type="checkbox"]:checked + label:after {  left: 26px;  -webkit-transform: translateX(24px);      -ms-transform: translateX(24px);       -o-transform: translateX(24px);          transform: translateX(24px);}

Not SupportedCSS3 TransformsYou can still see the changes in the background color without affecting the availability. For details, see css3 transforms. For performance issues, see high performance animations. Click "control" quickly, and the status cannot be switched due to the selected effect. Therefore, you can remove the "control" to be selected:

input[type="checkbox"]:checked + label,input[type="checkbox"]:not(:checked) + label {  (-prefix-)user-select: none;}

Here, the browser vendor prefix is replaced with the corresponding one as needed. For a simple example, see. Of course, you also need to provide a style for focusing and disabling states, so it will not be repeated here. All of the above technologies can be applied to a single middleware (radio) at the same time ).

Styling checkbox)