CSS 修改下拉框样式

我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 描述

参数面板中下拉框无法更改字体颜色,字体大小,背景色,按钮样式。可以根据下方步骤可设计属于你自己的下拉框主题。

2. 思路

通过 CSS 修改下拉框的字体颜色,字体大小,背景色,按钮样式。

3. 操作步骤
3.1 新建模板

新建一个模板,在参数面板中添加一个下拉框控件,设置数据字典,如下图:

3.2 编写 CSS 代码

新建一个文本文档,另存为 drop-down-box.css,输入下面的 CSS:

  1. .fr-trigger-btn-up{  
  2.     background-color: black;  
  3. }  
  4. .fr-trigger-btn-over{  
  5.     background-color: black;  
  6. }   
  7. .fr-trigger-btn-down{  
  8.     background-color: #303030;  
  9. }  
  10. .fr-combo-list-item{  
  11.     color: white;  
  12.     background-color: black;  
  13.     font-size: 14px;  
  14. }  
  15. .fr-combo-list{  
  16.     border:none ;  
  17. }  
  18. .fr-combo-selected{  
  19.     background-color: #292929;  
  20.     border-color: red;  
  21. }  
  22. .fr-combo-list-item-noselect{  
  23.     color: red !important;  
  24. }
复制代码

说明 :

.fr-trigger-btn-up :下拉按钮的类名 background-color: 背景色属性   black:为黑色  也可以设置 6 位 16 进制数   此行代码改变下拉按钮的颜色

.fr-trigger-btn-over,down :分别为鼠标移入移出的色彩

.fr-combo-list-ltem:下拉字体颜色 color,背景色,字体大小

.fr-combo-list:外边框设为无 border:边框线  none:无

.fr-combo-selected:鼠标经过的背景色

.fr-combo-list-item-noselect:下拉不选文字颜色希望突出  可自由更改 这里设定了为红色  !important 优先级为最高


3.3 调用 CSS 文件

将编辑好的 drop-down-box.css 文件放入\webapps\webroot\help\css下,打开模板,选择模板->模板 Web 属性->引用 CSS进行引用。


注:样式颜色可根据你自己需求在进行更改。

4. 决策报表
4.1 新建决策报表

新建一个决策报表,拖入参数面板,在参数面板中添加一个下拉框控件,设置数据字典,如下图:

4.2 调用 CSS 文件

CSS 代码同3.2 编写 CSS 代码,将编辑好的 drop-down-box.css 文件放入\webapps\webroot\help\css下,选中参数面板 para,添加初始化后事件,输入 JavaScript 代码引用 CSS 文件:

  1. $('<link rel="stylesheet" type="text/css" href="/webroot/help/css/drop-down-box.css"/>').appendTo('head');
复制代码

5. 预览效果
5.1 PC 端预览效果

点击分页预览,效果如图。


决策报表预览效果:

5.2 移动端预览效果

注:不支持移动端。

6. 已完成模板

模板效果在线查看请点击:利用 CSS 设置下拉框主题.cpt

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\08-利用Css设置下拉框主题.cpt

普通报表模板:点击下载模板

决策报表模板:CSS 修改下拉框样式.frm

CSS 文件:右击存储 CSS 文件




编辑于 2020-11-20 14:59  

编辑于 2020-11-20 15:00  
编辑于 2020-11-20 15:01  

发表于 2021-1-8 18:18:36
打开模板-web模板咱哪呢
发表于 2022-4-29 13:21:06
FRM模板文件有问题
发表于 2023-3-27 18:13:04
下拉字体大小不变
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 5关注人数 14188浏览人数
最后回复于:2023-3-27 18:13

返回顶部 返回列表