如下是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选择框向上弹出

LayUI样式优化的更多相关文章

  1. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  2. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  3. 【前端】input radio多选事件获取所有选中的id,radio样式优化可修改

    $("#all_button").on('click', function() { obj = document.getElementsByClassName("inpu ...

  4. CSS效果:CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  5. CSS select样式优化

    下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. <div class="sel_wrap"> <label>请选择 ...

  6. alert样式优化

    //alert样式优化 function alert(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮 msg = msg || ''; mode = ...

  7. MetaBase使用iframe内嵌到Vue页面样式优化

    Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...

  8. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

    Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...

  9. MVC Html.ValidationSummary()样式优化

    先看效果图 在MVC中常用ValidationSummary显示校验信息,默认样式为 针对Html.ValidationSummary()如何做优化 样式一: 在MVC中,如果你使用验证总结方法任何验 ...

  10. CSS样式优化

    一.css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的cs ...

随机推荐

  1. [转帖]通过架设Cockpit服务 使用Web浏览器监测管理多个Linux服务器

    Cockpit是一个易于使用,轻量级和简单但功能强大的工具,通过单个Web浏览器监视和管理多个远程Linux服务器. 如果你管理着一台 Linux 服务器,那么你可能正在寻找一个可靠的管理工具.为了这 ...

  2. [转帖]xfs_repair命令详解

    https://bbs.qunyingkeji.com/2052/ 1.现状 目前网上出现大量的主机输入输出错误,原因是由于主机文件系统损坏.一线人员大部分采用的是umont 和 mount的方式恢复 ...

  3. [转帖]Linux make: g++: Command not found

    https://www.cnblogs.com/kerrycode/p/4748606.html Linux使用make命令时遇到"make: g++: Command not found& ...

  4. Mark 一下 Redisson 可能需要升级版本

    貌似有bug 我们高并发的情况下貌似遇到了 https://github.com/redisson/redisson/issues/2299

  5. java浅拷贝BeanUtils.copyProperties引发的RPC异常 | 京东物流技术团队

    背景 近期参与了一个攻坚项目,前期因为其他流程原因,测试时间已经耽搁了好几天了,本以为已经解决了卡点,后续流程应该顺顺利利的,没想到 人在地铁上,bug从咚咚来~ 没有任何修改的服务接口,抛出异常: ...

  6. 【JS 逆向百例】网洛者反爬练习平台第四题:JSFuck 加密

    关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...

  7. windowsbat命令大全

    Bat文件的创建及其命令大全 一.bat文件的创建 新建txt文本文件 向文本文件中输入命令 保存并修改文本文件后缀为.bat 双击保存后的bat文件,运行 二.bat命令大全 echo 和 @ @ ...

  8. NLP领域任务如何选择合适预训练模型以及选择合适的方案【规范建议】【ERNIE模型首选】

    1.常见NLP任务 信息抽取:从给定文本中抽取重要的信息,比如时间.地点.人物.事件.原因.结果.数字.日期.货币.专有名词等等.通俗说来,就是要了解谁在什么时候.什么原因.对谁.做了什么事.有什么结 ...

  9. 深度学习应用篇-元学习[15]:基于度量的元学习:SNAIL、RN、PN、MN

    深度学习应用篇-元学习[15]:基于度量的元学习:SNAIL.RN.PN.MN 1.Simple Neural Attentive Learner(SNAIL) 元学习可以被定义为一种序列到序列的问题 ...

  10. 7.4 C/C++ 实现链表栈

    相对于顺序栈,链表栈的内存使用更加灵活,因为链表栈的内存空间是通过动态分配获得的,它不需要在创建时确定其大小,而是根据需要逐个分配节点.当需要压入一个新的元素时,只需要分配一个新的节点,并将其插入到链 ...