<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .el-radio{ display: inline-block; color: #606266; white-space: nowrap; position: relative; font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; } .el-radio-box{ border: 1px solid #dcdfe6; display: inline-block; border-radius: 100%; width: 14px; height: 14px; vertical-align: middle; } .el-radio-box:after{ display: inline-block; content:''; width: 6px; height: 6px; background-color: #b4b4b4; border-radius: 100%; border: 1px solid #b4b4b4; position: absolute; margin-top: -4px; top: 50%; left: 4px; } .el-radio-origin:checked+.el-radio-box{ border: 1px solid #3197EE; } .el-radio-origin:checked+.el-radio-box:after{ background-color: #3197EE; border: 1px solid #3197EE; } .el-radio-origin{ opacity: 0; position: absolute; left: -999px; } .el-radio-text{ display: inline-block; vertical-align: middle; padding-bottom: 3px; padding-left: 3px; } /*禁用的状态*/ .el-is-disabled{ cursor: not-allowed; } .el-is-disabled .el-radio-text { color: #c0c4cc; } </style> <body> <label role='radio' class='el-radio'> <span> <input type="radio" class='el-radio-origin' name='name'> <span class='el-radio-box'></span> </span> <span class='el-radio-text'>单选框1</span> </label> <label role='radio' class='el-radio'> <span> <input type="radio" class='el-radio-origin' name='name'> <span class='el-radio-box'></span> </span> <span class='el-radio-text'>单选框2</span> </label> <label role='radio' class='el-radio el-is-disabled'> <span> <input type="radio" class='el-radio-origin' name='name' disabled> <span class='el-radio-box'></span> </span> <span class='el-radio-text'>单选框3</span> </label> </body> </html>
