html 勾选框整体勾选,html单选、多选勾选样式

/********选择框勾选效果样式 start ********/

.inbox-page input.checkbox {

margin: 13px 0 0;

}

.inbox-page .checkbox {

position: relative;

top: -3px;

margin: 0 1rem 0 0;

cursor: pointer;

}

.inbox-page .checkbox:before {

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

content: "";

position: absolute;

left: 0;

z-index: 1;

width: 15px;

height: 15px;

border: 1px solid #A0A0A0;

}

.inbox-page .checkbox:after {

content: "";

position: absolute;

top: -0.125rem;

left: 0;

width: 1.1rem;

height: 1.1rem;

background: #fff;

cursor: pointer;

}

.inbox-page .checkbox:checked:before {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

height: .4rem;

width: .8rem;

border-color: #4F52BA;

border-top-style: none;

border-right-style: none;

border-width: 2px;

}

/********选择框勾选效果样式 end ********/

勾选

效果展示：