Style check box (styling checkbox)

check box checkbox is a common WEB application control, everywhere, the native check box control is generally like this:

Checked statusNo selected state

Depending on the operating system and the browser, sometimes this does not meet the design requirements, which requires a more refined check box style. In the past, only a handful of browsers supported applying styles to such controls, such as getting a design drawing:

Blue.png

In the past, it was impossible to achieve this design effect by simply modifying the style, but now with the powerful CSS3 property appearance you can have unprecedented style control over that type of control:

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

This sets the value of the property to none remove the original rendering of the check box, become an ordinary element, and then you can apply the style, add the following style:

Input[type= "checkbox"] {  -webkit-appearance:none;  Background: #fff URL (i/blue.png);  height:22px;  Vertical-align:middle;  width:22px;}

By using the state pseudo-class selector :checked , you can set different styles for the checkbox in the selected state to visually differentiate:

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

When you click the checkbox, you can see the change in the check box style, and also, depending on the design picture, you have to add a style that takes focus, disables the status, and so on:

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 picture has been merged into a single, simple modification background-position can be, while the first few selectors priority (weight), so the writing order is very important.

Compatibility

Currently only compatible with the Webkit series browser, although Firefox has implemented an alternative to the -moz-appearance properties, but the original control background color, border style can not be modified, temporarily is not easy to use; This property is temporarily not supported in the IE series, more detailed compatibility View caniuse/ Appearance. So you need to remove the effect of the background image for IE browser:

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

In order to be compatible with more mainstream browsers, you need to find another solution, in all major browsers, clicking on the label associated with a check box will result in the same effect as clicking on the element itself, which toggles the check box control's selected state. This behavior of the browser gives us a crucial hook, since we can rely on the label element to control the state of the native check box, then you can not directly manipulate the actual check box elements, and the operation and style are transferred to the associated label element up:

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

Make sure that the value of the property of the label element is consistent with the value of the check box input, and that the for id label element is placed after input so that the CSS can be located to this by the adjacent sibling selector (adjacent sibling selector) Label element and apply a style to it:

Input[type= "checkbox"] + label:before {  background: #fff URL (i/blue.png);  Content: "";  height:22px;  left:0;  Position:absolute;  width:22px;}

With the styling of the label element to provide interaction, the native CheckBox control is a bit superfluous, although it can be display: none hidden, but the hidden form element is not focusable, so the best way is to use the label element to cover it, so that can support keyboard interaction, At the same time, when the picture fails to load, it can ensure that the native control is available:

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

The picture should be large enough to completely block the Native CheckBox control because it uses absolute positioning, 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 left margin is reserved for better typography, and, as before, with other state styles:

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 browsers that support CSS3 selectors are basically compatible, with most of the interactive features of native controls. IE 8 does not support :checked pseudo-class selectors, modifying pseudo :before -elements to double colons ::before can remove the effect on IE 8:

Input[type= "checkbox"] + Label::before {...}

For the compatibility of pseudo-element generation content, see CSS Generated content for pseudo-elements. Admittedly, the above approach assumes that browsers that support :checked pseudo-class selectors also support double-colon pseudo-element notation, and unsupported browsers do not support it, which is a less-than-good way, which is actually incorrect, causing some of the old browsers to be unusable if you use :not() Selectors are more reasonable, use :not(:checked) to add styles to unchecked controls, :not() and :checked belong to a canonical css3-selectors, compatibility should be consistent CSS3 selectors. But the wording changes a little, :checked and :not(:checked) all need to add the basic style:

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

Looking at a simple example, for browsers that do not support :checked pseudo-class selectors (ie 8, for example), JavaScript can be used to modify the real class attributes to differentiate between different states based on the state of the control, such as whether to add or remove a checked Class

jquery$ (' input[type= ' checkbox '] '). On (' Change ', function () {  $ (this) [$ (this). Prop (' checked ')? ' AddClass ': ' Removeclass '] (' checked ');}); / * CSS */input[type= "checkbox"].checked + label:before {...}

With the previous basics, it is very simple to make a control like a switch button, or a familiar structure:

<div class= "checkbox" >  <input id= "Example" type= "checkbox" >  <label for= "Example" >check </label></div>

First, the shape of the switch is sketched, a rounded rectangle is placed in the middle of a circular button:

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

The selected effect simply modifies the background color of the outer border and the position of the middle button:

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

But this jumping change is too stiff to add a point transition effect that 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, for the middle button part used CSS3 Transforms to replace left the effect better, faster:

input[type= "checkbox"]:checked + label:after,input[type= "checkbox"]:not (: Checked) + label:after {   left -webkit-transform 0.3s;       -o-transition:           -o-transform 0.3s;           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);}

Unsupported CSS3 Transforms browsers can still see the change of background color, without affecting usability, see CSS3 Transforms. Refer to the high performance animations for performance issues. A Quick click on the "control" will cause the selected effect to be unable to toggle the state, so the ability to "control" can be selected is removed:

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

The browser vendor prefix here is replaced as appropriate to see a simple example. Of course, you also need to provide the style of focusing and disabling the state, it does not repeat here. All of the above technologies can be applied to the Radio box (radio).

Style check box (styling checkbox)