文章转自：http://finereport.blog.chinabyte.com/2010/09/28/115/ 

用户在实际项目中常会使用[url=http://www.finereport.com/]Java 报表[/url]软件，为了更符合使用者的审美观或者让报表和总体框架协调，可能需要修改一些页面显示的样式表(CSS)，如更换控件的图标或者改变填报表单控件的显示样式等。
下面以FineReport[url=http://www.finereport.com/products]报表软件[/url]为例，简单介绍下自定义控件图标。
如下以下拉树控件为例说明如何改变控件的图标。
1．下拉树模板制作
1.1    新建报表
1.2    定义参数
在菜单栏中选择报表|报表参数，定义报表参数tree。
1.3    参数界面设置，如下图所示
 [img]http://www.finereport.com/forumimages/e225.png[/img]

1.4    控件设置，如下图所示
类型选择下拉树，层次有两层，定义如下图
[img]http://www.finereport.com/forumimages/e226.png[/img]
 
[img]http://www.finereport.com/forumimages/e227.png[/img]
1.5    分页预览
分页预览可以看到默认的控件图标如下
 
[img]http://www.finereport.com/forumimages/e228.png[/img]
2.    引用CSS更换控件图标
2.1    收集图标
收集好需要使用的图标，推荐大小为16×16，假设想让树叶的图标为leaf.gif。
2.2    保存图标
在WebReport目录下(即和WEB-INF平行的地方)新建一个文件夹，文件名为custom，将第一步的图标放入该文件夹内。
2.3    生成CSS样式
在custom文件夹内新建一个css文件，如叫custom_tree.css，内容如下：
.bbit-tree-node-leaf{background:url("leaf.gif");}
说明：该语句是用来置换树叶的样式。
2.4    引用CSS
打开使用下拉树控件的[url=http://www.finereport.com/]报表[/url]，点击菜单报表|报表Web属性|引用css，在控件自定义样式表界面点插入按钮后写上custom_tree.css的相对路径：
custom/custom_tree.css
确定后保存报表。
 
[img]http://www.finereport.com/forumimages/e229.png[/img]
2.5    分页预览
点击设计器中的分页预览，可看到更换图标后的下拉树效果
 
[img]http://www.finereport.com/forumimages/e230.png[/img]
3.    控件相关CSS
    下拉树控件
.bbit-tree-node-expanded.bbit-tree-node-icon //节点展开的样式
.bbit-tree-node-leaf.bbit-tree-node-icon //树叶的样式
.bbit-tree-node-collapsed.bbit-tree-node-icon //闭合的样式
.bbit-tree-node-loading.bbit-tree-node-icon //正在加载的样式