CSS 修改按钮控件的文字大小

1. 描述
1.1 问题描述

除参数面板中自定义按钮外，单元格或者参数面板的按钮文字大小都不能改变 ，无论单元格拉多宽多高，字体设置为99  字体自适应都无效。

如何实现自定义按钮文字大小呢？如下图所示：

1.2 解决思路

通过 CSS 修改按钮大小和文字大小。

2. 操作步骤
2.1 新建模板

新建一个模板，在参数面板添加两个按钮控件，分别修改控件名称为：提交、重置：

2.2 编写 CSS

新建一个文本文档，另存为 button.css，输入下面的 CSS：

点击下载 button.css：button.css

1. #fr-btn-BUTTON0 .fr-btn-small button.fr-btn-text,
   
2. #fr-btn-BUTTON1 .fr-btn-small button.fr-btn-text{
   
3. height:40px;
   
4. font-size:25px;
   
5. }

复制代码

说明：

height：高度;

font-size：设置字体的大小，文字的大小跟随你设定值的大小而定;

fr-btn-BUTTON0、fr-btn-BUTTON1：其中 BUTTON0 和 BUTTON1 为按钮名称，一定要大写，如下图所示：

2.3 引用 CSS 文件

将编辑好的 button.css 文件放入\webapps\webroot\help\css下。

打开模板，选择模板->模板 Web 属性->引用 CSS 进行引用。

3. 预览效果
3.1 PC 端预览效果

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

3.2 移动端预览效果

注：不支持移动端。

4. 已完成模板

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\07-利用CSS设置按钮文字大小.cpt

点击下载模板：07-利用CSS设置按钮文字大小.cpt

点击下载 CSS 文件：button.css