Mobile development not to know things-css3 check box style custom

Style check box (styling checkbox)

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

Selected status unselected

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;

}

Setting this property value to None removes the original rendering of the check box, becomes an ordinary element, and you can apply a style to it, adding 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 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 one, simply modify background-position, and the priority (weight) of the previous selectors is the same, so the order of writing is important.

Compatibility

Currently only compatible with Webkit series browser, although Firefox also implements an alternative -moz-appearance property, but the original control background color, border style can not be modified, temporarily not easy to use; IE series temporarily does not support this property, See caniuse/appearancefor more detailed compatibility. 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 for property of the label element is the same as the ID value of the check box input, and that the label element is placed after input so that the CSS can be passed through the adjacent sibling selector (adjacent sibling sel Ector) Navigate to the Label element and apply the 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 hidden with Display:none , but the hidden form element is not focusable, so the best way is to use the label element to cover it so that both keyboard interaction is supported, and when the picture fails to load, it ensures 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 selector, the pseudo -element: Before modified to double colon :: Before can remove the impact on IE 8:

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

For the compatibility of pseudo-element generation content, see CSS Generatedcontent for pseudo-elements. Admittedly, the above method assumes support : checked pseudo-class selector browser also supports double colon pseudo-element notation, and unsupported browser is not supported, this is a bad way, this assumption is actually not correct, resulting in some old browser is not available problems, If using the : not () selector is more reasonable, use : Not (: checked) to add a style to the unchecked control: Not() and : checked the same specification Css3-selectors, compatibility should be consistent CSS3 selectors. However, the wording is somewhat different: checked and : Not (: checked) 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;

}

For a simple example , for browsers that do not support the checked pseudo-class selector (ie 8), JavaScript can be used to modify the True class attribute to differentiate between states based on the state of the control. For example, add or remove a checked class based on whether it is selected:

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 using CSS3 Transforms to replace the left effect better, faster:

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

}

Browsers that do not support CSS3 Transforms can still see the change in background color, without affecting usability, as described in CSS3 Transforms. Refer to the high performance animationsfor 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).

Mobile development not to know things-css3 check box style custom