1. 问题描述编辑
在实际项目中，为了让 FineReport 报表中的控件和页面中控件一致， 需要修改控件的显示样式，如更换控件的图标、修改控件边框颜色，本文将会给出 FineReport 中有那些控件样式可以修改，示例如何修改。
2. 控件 CSS 样式编辑
CSS：层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现HTML或XML等文件样式的计算机语言，简单来说，HTML用于构建网页的结构、CSS用于构建HTML中元素的样式。
2.1 查看控件的 class 选择器
1）浏览器预览报表，这里以 Chrome 浏览器为例。
2）将鼠标放在需要查看 class 的控件上，右键选择「检查」，即可查看到该控件的 class 语句。如下图所示：
2.2 FR 控件对应的 class 选择器
| class选择器 | 对应的控件样式 | 适用控件 |
|---|---|---|
| .fr-texteditor | 文本区域边框，字样(大小，颜色，字体等) | 文本、文本域、下拉框、下拉复选框、树、日期 |
| .fr-texteditor-focus | 获取焦点后的文本框的边框、字样 | 文本、文本域、下拉框、下拉复选框、树、日期 |
| .fr-trigger-texteditor | 下拉控件边框，字样(大小，颜色，字体等) | 下拉框、下拉复选框、下拉树、日期 |
| .fr-trigger-texteditor-focus | 获取焦点后的下拉控件边框、字样 | 下拉框、下拉复选框、下拉树、日期 |
| .fr-combo-list-item | 下拉项的边框、字样、背景色、高度 | 下拉框、下拉复选框 |
| .fr-combo-selected | 获得焦点的下拉项的边框、字样、背景色 | 下拉框 |
| .fr-combo-list-item-noselect | 下拉项中“不选“边框、字样、背景色 | 下拉框 |
| .fr-widget-click | 下拉项中文本的字样、背景色 | 下拉复选框 |
| .fr-checkbox-checkon | 已选择的下拉项中文本边框、字样、背景色 | 下拉复选框 |
| .fr-checkbox-checkoff | 未选择的下拉项中文本边框、字样、背景色 | 下拉复选框 |
| .fr-list-bwrap | 列表控件的背景色 | 列表 |
| .fr-list-node-anchor | 字样 | 列表 |
| .fr-list-node-over | 鼠标移动上去的列表项背景色，字体颜色 | 列表 |
| .fr-list-node-selected | 被选中的列表项的背景色，字体颜色 | 列表 |
| .fr-tree-node | 树列表的样式(背景色、字体等) | 视图树 |
| .fr-tree-elbow-plus | 加号图标样式 | 视图树 |
| .fr-tree-node-collapsed | 未展开的文件夹图标样式 | 视图树 |
| .fr-tree-elbow-minus | 减号图标样式 | 视图树 |
| .fr-tree-node-expanded | 已展开的文件夹图标样式 | 视图树 |
| .fr-tree-node-icon | 子节点图标样式 | 视图树 |
| .fr-btn-text | 按钮中文本的字样(大小，颜色，字体等) | 按钮 |
| .fr-btn-up | 按钮宽度、高度、背景色、边框 | 按钮 |
| .fr-datepicker | 展开的文本区域，字样(大小，颜色，字体等) | 日期 |
3. 示例编辑
设置控件的 CSS 样式可以在「模板 Web 属性」中引用 CSS 实现，也可以在「模板 Web 属性」中添加事件实现，据此给出如下两个示例。
3.1 修改文本框边框颜色和字体
希望参数面板上文本框控件的边框变为红色，字体颜色变为蓝色。如下图所示：
3.1.1 准备模板
1）新建模板，添加一个模板参数 p1。
2）将参数添加到参数面板中，并设置为文本框控件，参数默认值是地区。
最终模板如下图所示：
3.1.2 准备 CSS 文件
新建一个 CSS 文件test.css，保存在%FR_HOME%webroot 目录下。
CSS 文件内容为：
.fr-texteditor{ border:1px solid red; color:blue; font-weight:bold;}其中 .fr-texteditor 是文本框类选择器，代码修改文本框的边框为红色，字体为蓝色加粗。
3.1.3 引用 CSS 文件
打开模板，点击「模板>模板 Web 属性」，选择，点击按钮，添加刚刚新建的 CSS 文件。如下图所示：
3.1.4 预览效果
保存模板，点击「分页预览」。效果如 3.1 节开头所示。
3.2 设置控件不可用不置灰
参数面板中控件，设置为「不可用」时，希望显示效果不置灰，和设置为「可用」时效果一致。如下图所示：
注：控件选择不可用后，预览不透明度降低，显示灰色 
。
3.2.1 准备模板
1）新建模板，添加一个模板参数 p1。
2）将参数添加到参数面板中，并设置为下拉框控件。
3）在 A1 单元格中也添加填报下拉框控件。
最终模板如下图所示：
3.2.2 添加 WEB 页面事件
打开模板，点击「模板>模板 Web 属性>填报页面设置」，选择 「为该模板单独设置」，勾选「直接显示控件」，添加一个「加载结束」事件，如下图所示：
JavaScript 代码如下：
setTimeout(function() {$(".ui-state-disabled").css({'opacity':'1'});}, 100)
代码重置控件的不透明度为 1，其中opacity: value|inherit
| 值 | 描述 |
|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
3.2.3 预览效果
保存模板，点击「分页预览」。效果如 3.2 节开头所示。
3.3 设置日期控件展开框字体样式
希望参数面板上日期控件的字体由默认字体变为Arial字体。如下图所示：
3.3.1 准备模板
1）新建模板，添加一个模版参数p1。
2）将参数添加到参数面板中，并设置为日期控件。
最终模板如下图所示：
3.3.2 添加日期参数控件事件
打开模板，点击「日期控件>事件」，添加一个「初始化后」事件，如下图所示：
JavaScript 代码如下：
setInterval(function(){$(".fr-datepicker").css("font-family", "Arial");},500)
3.3.3 预览效果
保存模板，点击「数据分析预览」。效果如 3.3 节开头所示。