html:
- <div class="wrap">
- <p>
- 1. 勾选
- </p>
- <input type="checkbox" id="checkbox_a1" class="chk_1" checked />
- <label for="checkbox_a1">
- </label>
- <input type="checkbox" id="checkbox_a2" class="chk_1" />
- <label for="checkbox_a2">
- </label>
- </div>
CSS:
- .chk_1 {
- display: none;
- }
- /*******STYLE 1*******/
- .chk_1 + label {
- background - color: #FFF;
- border: 1px solid#C1CACA;
- box - shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
- inset 0px - 15px 10px - 12px rgba(0, 0, 0, 0.05);
- padding: 9px;
- border - radius: 5px;
- display: inline - block;
- position: relative;
- margin - right: 30px;
- }.chk_1 + label: active {
- box - shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
- inset 0px 1px 3px rgba(0, 0, 0, 0.1);
- }.chk_1: checked + label {
- background - color: #ECF2F7;
- border: 1px solid#92A1AC;
- box - shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
- inset 0px - 15px 10px - 12px rgba(0, 0, 0, 0.05),
- inset 15px 10px - 12px rgba(255, 255, 255, 0.1);
- color: #243441;
- }.chk_1: checked + label: after {
- content: '\2714';
- position: absolute;
- top: 0px;
- left: 0px;
- color: #758794;
- width: 100 % ;
- text - align: center;
- font - size: 1.4em;
- padding: 1px 0 0 0;
- vertical - align: text - top;
- }
效果如下:
来源: http://www.bubuko.com/infodetail-1972701.html