<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox样式</title> <style> .el-checkbox{ display: inline-block; position: relative; font-size: 14px; font-weight: 500; color: #606266; cursor: pointer; user-select: none; white-space: nowrap; } .el-checkbox-box{ display: inline-block; width: 14px; height: 14px; border: 1px solid #dcdfe6; vertical-align: middle; border-radius: 2px; } .el-checkbox-box::after{ width: 3px; height: 7px; content: ''; border: 1px solid #fff; display: inline-block; border-top: 0; border-left: 0; position: absolute; top: 6px; left: 6px; transform: rotate(45deg); } .el-checkbox-origin[disabled]:checked + .el-checkbox-box::after{ border-color: #c0c4cc; } .el-checkbox-origin{ outline: none; opacity: 0; position: absolute; left: -999px; } .el-checkbox-text{ display: inline-block; line-height: 19px; vertical-align: middle; padding: 2px; } .el-checkbox-origin:checked + .el-checkbox-box{ background-color: #409eff; border-color: #409eff; } .el-checkbox-origin[disabled]:checked + .el-checkbox-box{ background-color: #f2f6fc; border-color: #c0c4cc; } .el-checkbox:hover .el-checkbox-box{ border-color: #409eff; } /*禁用的状态，注意需要和input里的disabled=disabled进行配合使用*/ .el-is-disabled{ cursor: not-allowed; } .el-is-disabled .el-checkbox-text { color: #c0c4cc; } .el-is-disabled:hover .el-checkbox-box{ border-color: #dcdfe6;; } </style> </head> <body> <!-- 正常状态 --> <label role='checkbox' class='el-checkbox'> <span> <input type="checkbox" class='el-checkbox-origin'> <span class='el-checkbox-box'></span> </span> <span class='el-checkbox-text'>复选框1</span> </label> <!-- 选中状态 --> <label role='checkbox' class='el-checkbox'> <span> <input type="checkbox" class='el-checkbox-origin' checked> <span class='el-checkbox-box'></span> </span> <span class='el-checkbox-text'>复选框2</span> </label> <!-- 禁用状态 --> <label role='checkbox' class='el-checkbox el-is-disabled'> <span> <input type="checkbox" class='el-checkbox-origin' disabled=disabled> <span class='el-checkbox-box'></span> </span> <span class='el-checkbox-text'>复选框3</span> </label> <label role='checkbox' class='el-checkbox el-is-disabled el-is-checked'> <span> <input type="checkbox" class='el-checkbox-origin' disabled=disabled checked> <span class='el-checkbox-box'></span> </span> <span class='el-checkbox-text'>复选框3</span> </label> </body> </html>
