[HTML5 form Style checkbox | radio] Custom checkbox and radio style implementation ideas

Custom checkbox and radio style implementation ideas:

1. Hide the native input marquee
2. Customizing the new Marquee
3. And through the CSS or JS control to toggle whether the selected state

Disclaimer: Reproduced from the network, I only as a study, if the original author found (feel) have the intention of infringement please contact me, delete or modify, I respect the work of the original author and the original author of the share expressed thanks and respect ...

Analysis principle:

Implement

1, Structure: With the label input, the recommended use of label package input, to reduce unnecessary ID;

2. Style: Hide input tag, add background for label or use other small label (<i></i>) to make marquee style;

There are a number of ways to hide the input tags:

• 1) display

  Display:none;

• 2) Visibility

  Visibility:hidden;

• 3) Transparency

  Input[type=checkbox] {    position:absolute;    /* for IE *    /Filter:alpha (opacity=0);    /* CSS3 Standard */    opacity:0;    width:18px;    height:18px;}

• 4) Width

  Input[type=checkbox] {    border:none;    padding:0;    width:0;    height:18px;}

• ......

There are many ways to make styles:

• 1) Add a background image to the label;
• 2): Before;
• 3) Simple styles can be implemented by adding elements, using CSS.

At the same time with transition, transform and other properties to achieve a simple animation effect.

3, switch: Marquee style switching can be achieved by: checked pseudo-elements (ie8+), for IE8 the following browser can be controlled by JS.

Demo: pure CSS Implementation

a more flattering effect.

Animating using SVG: Animated checkboxes and Radio Buttons with SVG

A JS library of SVG animations: Raphael can be compatible to IE6

related Properties

Chrome browser, the default checkbox style is as follows:

1, box-sizing (-moz-box-sizing)

Displaying elements in a certain way alters the calculation of the width of the elements in the box model

Value:

• The default value is Content-box, the width of the given element is higher than the width of the content, and the padding, borders, and margins are expanded on this basis;
• Border-box you set the width of the height is the width of the element, the inner margin and the border will squeeze the content area, the margin will be based on the expansion;
• Padding-box.

Compatibility: ie8+

is a user interface property that is still in the experiment.

a W3school instance

IE8 checkbox default box-sizing is Content-box;

Chrome's checkbox defaults to box-sizing Border-box

MDN Related Instructions

2, Appearance (-moz-appearance/-webkit-appearance)

Used to implement or disguise as certain special elements (such as button/checkbox, etc.).

Compatibility: Non-standard attributes, only Firefox, Safari, and chrome support, and the performance difference on different browsers is large

MDN Related InstructionsRelated reading

Some in-depth research and understanding of checkbox check box
The 09 article, rather than the content itself, is more of a research idea worth (like a horn-tipped person) study reference

Icheck Plugin Icheck Plugin Chinese description
A plugin specifically tailored for checkboxes and radio, and has not yet been read Orz

 

　　

[HTML5 form Style checkbox | radio] Custom checkbox and radio style implementation ideas