checkbox居中 editor_checkbox单选，css样式修改

checkbox单选，css样式修改

效果图

style 样式

/* 多选 */

div.form-checkbox input[type="checkbox"] {

display: none;

}

div.form-checkbox input[type="checkbox"],

div.form-checkbox label {

position: relative;

vertical-align: middle;

margin: 0;

margin-right: 32px;

cursor: pointer;

}

div.form-checkbox input[type="checkbox"]:checked+label::before {

background-color: #409eff;

border-color: #409eff;

}

div.form-checkbox label::before {

display: inline-block;

content: '';

width: 14px;

height: 14px;

background: #FAFAFA;

border: 1px solid #DDDDDD;

transition: all 0.3s ease-in;

margin-right: 5px;

}

div.form-checkbox input[type="checkbox"]:checked+label::after {

transform: rotate(45deg) scaleY(1);

}

div.form-checkbox label::after {

box-sizing: content-box;

content: "";

border: 1px solid #fff;

border-left: 0;

border-top: 0;

position: absolute;

height: 7px;

width: 3px;

left: 6px;

top: 4px;

transform: rotate(45deg) scaleY(0);

transition: transform .15s ease-in .05s;

transform-origin: center;

}

html 代码

MarkDown编辑器

作者：admin