LayUI样式优化

如下是LayUI框架中页面元素的CSS优化样式:

/* 表单输入框宽度 */
.layui-form-item .layui-input-inline {
    width: 295px;
}
/* 下拉框向上弹出 */
.layui-form-select dl {
    top: auto;
    bottom: 36px;
}
/* 表单必填项目 */
.label-required-next:after {
    top: 6px;
    right: 5px;
    color: red;
    content: '*';
    position: absolute;
    margin-left: 4px;
    font-weight: 700;
    line-height: 1.8em;
}
/* 解决通过方法渲染的表格checkbox不居中问题 */
.layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
    top: 50%;
    transform: translateY(-50%);
}
/* 下拉框,滚动条无法展示所有选项的问题 */
.layui-form-select dl {
    max-height:250px;
}

【参考】
https://blog.csdn.net/BeauXie/article/details/60959971 layer的Icon样式以及一些常用的layer窗口使用
https://blog.csdn.net/qq_24562495/article/details/104516722 layui表单必填项带*样式
https://blog.csdn.net/cccmercy/article/details/79115550 解决Layui数据表格中checkbox位置不居中
https://blog.csdn.net/weixin_45237517/article/details/100694438 layui form 中input输入框长度的统一设置
https://blog.csdn.net/FansUnion/article/details/88616186 layui-select下拉框,滚动条无法展示所有选项的问题
https://blog.csdn.net/hangchen1025/article/details/107337215 使layui的select选择框向上弹出

posted @ 2022-04-06 22:55  nuccch  阅读(768)  评论(0编辑  收藏  举报