历史版本6 :CSS 修改下拉框样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑



参数面板中下拉框无法更改字体颜色,字体大小,背景色,按钮样式。可以根据下方步骤可设计属于你自己的下拉框主题。


2. 思路编辑


通过CSS修改下拉框的字体颜色,字体大小,背景色,按钮样式。


3. 操作步骤编辑



3.1 新建模板

新建一个模板,在参数面板中添加一个下拉框控件,设置数据字典,如下图:

222

3.2 编写CSS代码

新建一个文本文档,另存为drop-down-box.css,输入下面的CSS:


.fr-trigger-btn-up{  
    background-color: black;  
}  
.fr-trigger-btn-over{  
    background-color: black;  
}   
.fr-trigger-btn-down{  
    background-color: #303030;  
}  
.fr-combo-list-item{  
    color: white;  
    background-color: black;  
    font-size: 14px;  
}  
.fr-combo-list{  
    border:none ;  
}  
.fr-combo-selected{  
    background-color: #292929;  
    border-color: red;  
}  
.fr-combo-list-item-noselect{  
    color: red !important;  
}

说明 :

.fr-trigger-btn-up :下拉按钮的类名 background-color: 背景色属性   black:为黑色  也可以设置6位16进制数   此行代码改变下拉按钮的颜色

.fr-trigger-btn-over,down :分别为鼠标移入移出的色彩

.fr-combo-list-ltem:下拉字体颜色color,背景色,字体大小

.fr-combo-list:外边框设为无 border:边框线  none:无

.fr-combo-selected:鼠标经过的背景色

.fr-combo-list-item-noselect:下拉不选文字颜色希望突出  可自由更改 这里设定了为红色  !important 优先级为最高


3.3 调用CSS文件


将编辑好的drop-down-box.css文件放入\webapps\webroot\help\css下,打开模板,选择模板->模板web属性->引用CSS进行引用。

222

注:样式颜色可根据你自己需求在进行更改。


4. 预览效果编辑



4.1 PC端预览效果


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

222


4.2 移动端预览效果


注:不支持移动端。


5. 已完成模板编辑


模板效果在线查看请点击:利用Css设置下拉框主题.cpt

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\08-利用Css设置下拉框主题.cpt

点击下载模板

右击存储CSS文件