CSS3 Customizing the check box effect of a radio box with Fontawesome fonts

Often see others do the front-end when the implementation of some beautiful check box or radio button, due to the current project reasons, a lot of radio boxes and check boxes look very bad, so, the whim of the plan to achieve their own.

First, the CSS code:

1. wherein, I write in the form of a note in the inside;

2. About Z-index I was based on the initial positioning considerations to set up, here if who want to use, self-thinking;

/* check box effect */input[type=checkbox] {width:16px;    height:16px;  Z-index:10;}    /* Not explained here, defined as check box width height */input[type=checkbox]::before {content: "";    Display:inline-block;    Color: #000;    width:16px;    height:16px;    Background: #fff;    border:1px #1ab394 Solid;    Z-index:9; Position:absolute;}    /* Defined here is a style that is not checked, using: Before to set the empty content implementation */input[type=checkbox]:checked::before {content: "\f00c";     Color: #1ab394;     Font:normal normal normal 14PX/1 fontawesome;     Font-size:inherit;     Text-rendering:auto;     -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}    /* This defines the style of the check box at the time it is selected, which is implemented here in before's content using \F00C's awesome font value, which indicates a tick *//* single box effect */input[type=radio] {width:16px;    height:16px; Z-index:10;}    Input[type=radio]::before {content: "";    Display:inline-block;    Color: #000;    width:16px;    height:16px;    border-radius:8px;    Background: #fff;    border:1px #1ab394 Solid;    Z-index:9; Position:absolute;} Input[type=radio]:cHecked::after {content: "";    Display:inline-block;    width:8px;    height:8px;    Background: #1ab394;    border-radius:50%;    Position:absolute;    Z-index:11;    top:4px; left:4px;} /* Above the Radio box and check box is similar, but here is not to use the replacement font, at present, did not find a suitable font for the inside of the dot, so use after setting a long width of 8 pixels of the block and set the fillet adjustment position in the outer border content implementation */

Second, the final presentation of the effect:

To be the reality of my application.

Often see others do the front-end when the implementation of some beautiful check box or radio button, due to the current project reasons, a lot of radio boxes and check boxes look very bad, so, the whim of the plan to achieve their own.

First, the CSS code:

1. wherein, I write in the form of a note in the inside;

2. About Z-index I was based on the initial positioning considerations to set up, here if who want to use, self-thinking;

/* check box effect */input[type=checkbox] {width:16px;    height:16px;  Z-index:10;}    /* Not explained here, defined as check box width height */input[type=checkbox]::before {content: "";    Display:inline-block;    Color: #000;    width:16px;    height:16px;    Background: #fff;    border:1px #1ab394 Solid;    Z-index:9; Position:absolute;}    /* Defined here is a style that is not checked, using: Before to set the empty content implementation */input[type=checkbox]:checked::before {content: "\f00c";     Color: #1ab394;     Font:normal normal normal 14PX/1 fontawesome;     Font-size:inherit;     Text-rendering:auto;     -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}    /* This defines the style of the check box at the time it is selected, which is implemented here in before's content using \F00C's awesome font value, which indicates a tick *//* single box effect */input[type=radio] {width:16px;    height:16px; Z-index:10;}    Input[type=radio]::before {content: "";    Display:inline-block;    Color: #000;    width:16px;    height:16px;    border-radius:8px;    Background: #fff;    border:1px #1ab394 Solid;    Z-index:9; Position:absolute;} Input[type=radio]:cHecked::after {content: "";    Display:inline-block;    width:8px;    height:8px;    Background: #1ab394;    border-radius:50%;    Position:absolute;    Z-index:11;    top:4px; left:4px;} /* Above the Radio box and check box is similar, but here is not to use the replacement font, at present, did not find a suitable font for the inside of the dot, so use after setting a long width of 8 pixels of the block and set the fillet adjustment position in the outer border content implementation */

Second, the final presentation of the effect:

To be the reality of my application.