FineReport智能报表工具- CSS修改控件样式

1. 概述

 1.1 使用场景

在实际项目中，为了让 FineReport 报表中的控件和页面风格一致， 可以通过 CSS 修改控件的显示样式。

如下图所示，希望参数面板上文本框控件的边框变为红色，字体颜色变为蓝色。

除更换控件字体、修改边框颜色外，还可以更换控件的图标、修改控件的背景等。如下可以调整的内容：

1. 修改控件默认的蓝色背景

1. 将控件的背景调整为半透明或者透明

1. 修改控件的字体大小、字体样式、字体颜色

1. 修改控件的长宽大小高度

1. 修改控件边框的颜色

1. 修改控件选项中字体大小选项间距

本文将会给出 FineReport 中有那些控件样式可以修改，并通过几个示例说明如何修改。如下列出一下使用较多的场景：

1. 修改下拉框的字体颜色、字体大小、默认蓝色背景，背景透明度、选项列表的长宽大小等

1. 修改按钮的字体颜色、字体大小、默认蓝色背景，背景透明度、按钮长宽大小等

1. 修改标签控件的字体颜色、字体大小、边框背景等

1. 修改日期控件的字体颜色、字体大小、字体型号、默认蓝色背景，背景透明度、选项日期格子的长宽大小等

1. 修改文本控件的字体颜色、字体大小、边框背景等

1. 修改下拉树、视图树的字体颜色、字体大小、默认蓝色背景，背景透明度、选项列表的长宽大小等

1. 修改单选、复选按钮控件的字体颜色、字体大小、背景透明度、按钮选项的排列位置等

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，以下 class 会有变化。

class选择器	对应的控件样式	适用控件
.fr-texteditor	文本区域边框，字样(大小，颜色，字体等)	文本、文本域、下拉框、下拉复选框、树、日期
.fr-texteditor-focus	获取焦点后的文本框的边框、字样	文本、文本域、下拉框、下拉复选框、树、日期
.fr-trigger-texteditor	下拉控件边框ÿ