@charset "utf-8";
input.radiocheck+label{cursor:pointer;position:relative}input.radiocheck+label:after,input.radiocheck+label:before{font-family:FontAwesome;position:absolute;text-align:center}input.radiocheck+label.full{background:#23b7e5;border-radius:3px;color:#fff}input.radiocheck+label.full:after,input.radiocheck+label.full:before{color:#fff;background:#23b7e5}input.radiocheck+label.full:before{content:'\f00d'}input.radiocheck+label.full:after{content:'\f00c';opacity:0;transition:all .2s}input[type=checkbox].radiocheck:disabled+label.full,input[type=checkbox].radiocheck:disabled+label.full:after,input[type=checkbox].radiocheck:disabled+label.full:before,input[type=radio].radiocheck:disabled+label.full,input[type=radio].radiocheck:disabled+label.full:after,input[type=radio].radiocheck:disabled+label.full:before{background:#72d5f3;cursor:default}input.radiocheck+label.full.small.right{font-size:12px;padding:6px 30px 6px 6px}input.radiocheck+label.full.small.left{font-size:12px;padding:6px 6px 6px 30px}input.radiocheck+label.full.small.right:after,input.radiocheck+label.full.small.right:before{font-size:14px;top:5px;right:5px;width:18px;line-height:18px;height:18px}input.radiocheck+label.full.small.left:after,input.radiocheck+label.full.small.left:before{font-size:14px;top:5px;left:5px;width:18px;line-height:18px;height:18px}input.radiocheck+label.full.default{font-size:16px;padding:10px 40px 10px 10px}input.radiocheck+label.full.default.left{font-size:16px;padding:10px 10px 10px 40px}input.radiocheck+label.full.default::after,input.radiocheck+label.full.default::before{font-size:22px;height:24px;line-height:24px;right:9px;top:9px;width:24px}input.radiocheck+label.full.default.left:after,input.radiocheck+label.full.default.left:before{font-size:22px;height:24px;line-height:24px;left:9px;top:9px;width:24px}input.radiocheck+label.full.big.right{font-size:26px;padding:10px 50px 10px 10px}input.radiocheck+label.full.big.right::after,input.radiocheck+label.full.big.right::before{font-size:30px;height:26px;line-height:26px;right:12px;top:16px;width:26px}input.radiocheck+label.full.big.left{font-size:26px;padding:10px 10px 10px 50px}input.radiocheck+label.full.big.left::after,input.radiocheck+label.full.big.left::before{font-size:30px;height:26px;line-height:26px;left:12px;top:16px;width:26px}input.radiocheck+label.nofull:after,input.radiocheck+label.nofull:before{border:2px solid #23b7e5;border-radius:4px;text-align:center;color:#23b7e5}input.radiocheck+label.nofull:before{content:''}input.radiocheck+label.nofull:after{content:'\f00c';background:#23b7e5;color:#fff;opacity:0;transition:all .2s}input[type=checkbox].radiocheck:disabled+label.nofull{cursor:default}input[type=checkbox].radiocheck:disabled+label.nofull:before{border:2px solid #72d5f3;cursor:default}input[type=checkbox].radiocheck:disabled+label.nofull:after{border:2px solid #72d5f3;background:#72d5f3;cursor:default}input[type=radio].radiocheck:disabled+label.nofull{cursor:default}input[type=radio].radiocheck:disabled+label.nofull:before{border:2px solid #72d5f3;cursor:default}input[type=radio].radiocheck:disabled+label.nofull:after{border:2px solid #72d5f3;background:#72d5f3;cursor:default}input.radiocheck+label.nofull.small.right{font-size:12px;padding-right:26px;padding-top:1px}input.radiocheck+label.nofull.small.right:after,input.radiocheck+label.nofull.small.right:before{font-size:14px;top:0;right:0;width:16px;line-height:16px;height:16px}input.radiocheck+label.nofull.small.left{font-size:12px;padding-left:26px;padding-top:1px}input.radiocheck+label.nofull.small.left:after,input.radiocheck+label.nofull.small.left:before{font-size:14px;top:0;left:0;width:16px;line-height:16px;height:16px}input.radiocheck+label.nofull.default.right{font-size:16px;padding-right:40px;padding-top:2px}input.radiocheck+label.nofull.default.right:after,input.radiocheck+label.nofull.default.right:before{font-size:22px;top:0;right:0;width:24px;line-height:24px;height:24px}input.radiocheck+label.nofull.default.left{font-size:16px;padding-left:40px;padding-top:2px}input.radiocheck+label.nofull.default.left:after,input.radiocheck+label.nofull.default.left:before{font-size:22px;top:0;left:0;width:24px;line-height:24px;height:24px}input.radiocheck+label.nofull.big.right{font-size:26px;padding-right:60px;padding-top:2px}input.radiocheck+label.nofull.big.right:after,input.radiocheck+label.nofull.big.right:before{font-size:30px;top:0;right:0;width:36px;line-height:36px;height:36px}input.radiocheck+label.nofull.big.left{font-size:26px;padding-left:60px;padding-top:2px}input.radiocheck+label.nofull.big.left:after,input.radiocheck+label.nofull.big.left:before{font-size:30px;top:0;left:0;width:36px;line-height:36px;height:36px}input[type=checkbox].radiocheck,input[type=radio].radiocheck{display:none}input[type=checkbox].radiocheck:checked+label:after,input[type=radio].radiocheck:checked+label:after{opacity:1}

1. Include Font Awesome css:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

2. Include RadioCheck Awesome css:

<link rel="stylesheet" href="/yourPath/radiocheck.css"/>

3. Used:

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" full small right" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" full small left" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" full default right" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" full default left" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" full big right" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" full big left" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" nofull small right" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" nofull small left" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" nofull default right" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" nofull default left" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" nofull big right" for="checkbox">Checkbox</label>

Checkbox

<input type="checkbox" class=" radiocheck" name="checkbox" id="checkbox" /><label class=" nofull big left" for="checkbox">Checkbox</label>

Checkbox

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" full small right" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" full small left" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" full default right" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" full default left" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" full big right" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" full big left" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" nofull small right" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" nofull small left" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" nofull default right" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" nofull default left" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" nofull big right" for="radio">Radio</label>

Radio

<input type="radio" class=" radiocheck" name="radio" id="radio" /><label class=" nofull big left" for="radio">Radio</label>

Radio

项目编码工程师checkboxradiofont awesome

收藏 1

评论加载中...

一个简单网站的开发流程(起步)

2017/12/05 4 0

产品经理的常用软件

2017/12/05 1 0

feifeicms3.6新功能《搜索联想控制开关介绍》

2017/12/05 1 0

discuz如何让游客可以看见图片,却不能下载帖子的附件

2017/12/05 1 0

纯CSS3漂亮的复选框和单选框 美化checkbox和radio用Font Awesome

2017/12/20 0 0

bootstrap+font-awesome表单

2017/12/20 0 0

thinkphp group count 去重统计查询

2017/12/07 0 0

Thinkphp2.1 行为扩展使用方法

2017/12/07 0 0

iscuz!全局变量$_G详解

2017/12/07 0 0