CSS 修改下拉框样式

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 文件

打开模板-web模板咱哪呢

FRM模板文件有问题

下拉字体大小不变

文件都下载不了了

没看到