更改layui 默认单选框radio样式

xyzko1

于 2023-08-19 17:09:28 发布

阅读量1.3k

点赞数 1

文章标签： layui 前端 javascript

原文链接：https://blog.youkuaiyun.com/katy_1/article/details/101723575

版权

本文介绍了如何在HTML和CSS中使用layui框架定制表单的单选按钮样式，包括基础样式和选中状态的图形设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更改后效果展示：

html：

<div class="container">
<form class="layui-form" action="">
<h2>自定义样式</h2>
<div class="layui-form-item">
<div class="layui-form-label">单选框</div>
<div class="layui-input-block">
<input class="radio" type="radio" name="gender" value="male" title="男" checked>
<input type="radio" name="gender" value="female" title="女">
</div>
</div>
</form>
</div>

css：

.layui-form-radio i {
top: 0;
width: 16px;
height: 16px;
line-height: 16px;
border: 1px solid #d2d2d2;
font-size: 12px;
border-radius: 2px;
background-color: #fff;
color: #fff !important;
}
.layui-form-radioed i {
position: relative;
width: 18px;
height: 18px;
border-style: solid;
background-color: #0066b3;
color: #0066b3 !important;
}
/* 使用伪类画选中的对号 */
.layui-form-radioed i::after, .layui-form-radioed i::before {
content: "";
position: absolute;
top: 8px;
left: 5px;
display: block;
width: 12px;
height: 2px;
border-radius: 4px;
background-color: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.layui-form-radioed i::before {
position: absolute;
top: 10px;
left: 2px;
width: 7px;
transform: rotate(-135deg);
}