.m-checkbox{ color: #606266; font-weight: 500; font-size: 14px; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; user-select: none; margin-right: 30px; .m-checkbox__input{ white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; vertical-align: middle; .m-checkbox__inner{ display: inline-block; position: relative; border: 1px solid #dcdfe6; border-radius: 2px; box-sizing: border-box; width: 14px; height: 14px; background-color: #fff; z-index: 1; transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46); &::after{ box-sizing: content-box; content: ""; border: 1px solid #fff; border-left: 0; border-top: 0; height: 7px; left: 4px; position: absolute; top: 1px; transform: rotate(45deg) scaleY(0); width: 3px; transition: transform .15s ease-in .05s; transform-origin: center; } } .m-checkbox__original{ opacity: 0; outline: none; position: absolute; margin: 0; width: 0; height: 0; z-index: -1; } } //选中 .is-checked{ .m-checkbox__inner{ background-color: #409eff; border-color: #409eff; &::after{ transform: rotate(45deg) scaleY(1); } } } .is-checked.is-disabled{ .m-checkbox__inner{ background-color: #f2f6fc; border-color: #dcdfe6; cursor: no-drop; &::after{ border-color: #c0c4cc; } } } .is-indeterminate{ .m-checkbox__inner{ background-color: #409eff; border-color: #409eff; &::before{ content: ""; position: absolute; display: block; background-color: #fff; height: 2px; transform: scale(.5); left: 0; right: 0; top: 5px; } } } .is-disabled{ cursor: no-drop; color: #c0c4cc; .m-checkbox__inner{ background-color: #edf2fc; border-color: #dcdfe6; cursor: not-allowed; } } .m-checkbox__label{ display: inline-block; padding-left: 10px; line-height: 19px; font-size: 14px; } } // 禁用 .is-disabled{ cursor: no-drop; color: #c0c4cc; .m-checkbox__inner{ background-color: #edf2fc; border-color: #dcdfe6; cursor: not-allowed; } } .is-disabled.is-indeterminate { .m-checkbox__inner { &::before{ background-color: #c0c4cc; border-color: #c0c4cc; } } } // 边框 .is-bordered{ padding: 9px 20px 9px 10px; border-radius: 4px; border: 1px solid #dcdfe6; box-sizing: border-box; line-height: normal; height: 40px; } .is-bordered.is-checked{ border-color: #409eff; color: #409eff; }