目录:
1. 概述编辑
1.1 使用场景
在实际项目中，为了让 FineReport 报表中的控件和页面风格一致， 需要修改下控件的显示样式。
如下图所示，希望参数面板上文本框控件的边框变为红色，字体颜色变为蓝色。
除更换控件字体、修改边框颜色外，还可以更换控件的图标、修改控件的背景等。如下可以调整的内容：
如何调整下拉框、日期控件的默认颜色
如何修改查询按钮的颜色、长宽度
如何修改标签控件的颜色、背景、边框
如何修改文本控件的背景色、字体大小
如何设置对话框背景透明或为其添加一层透明遮盖
如何将下拉框的背景调整为透明
如何调整控件蓝色部分的颜色
本文将会给出 FineReport 中有那些控件样式可以修改，并通过几个示例说明如何修改。
1.2 实现方法
通过修改控件的 CSS 样式来实现。
CSS 是一种用来表现 HTML 或 XML 等文件样式的计算机语言，简单来说，HTML 用于构建网页的结构、CSS 用于构建 HTML 中元素的样式，所以修改控件的 CSS 即可修改控件的样式。
注：新引擎 cptx 模板、cpt 模板「新填报预览」不支持通过修改控件的 CSS 样式来实现修改控件样式。
2. 获取控件 CSS 样式编辑
用户再修改前需要先获取到控件的 class 选择器。
用户可以参考 2.1 节通过浏览器获得控件的 class 选择器，也可以参考 2.2 节直接查看 FR 的控件对应的 class 选择器。获取到 class 选择器之后就可以直接修改控件的样式，具体使用可参考 CSS 语法或者本文示例。
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 设置日期控件展开框字体样式
希望参数面板上日期控件的字体由默认字体变为华文楷体。如下图所示：
3.3.1 准备模板
1）新建模板，添加一个模版参数 p1。
2）将参数添加到参数面板中，并设置为日期控件。
最终模板如下图所示：
3.3.2 添加初始化后事件
点击「日期控件」，在「控件设置>事件」处，为其添加一个「初始化后」事件，如下图所示：
JavaScript 代码如下：
setInterval(function(){$(".fr-datepicker").css("font-family", "华文楷体");},500)
3.3.3 预览效果
保存模板，点击「分页预览」，效果如 3.3 节开头所示。