决策报表上的【下拉框控件】怎么按美工设计效果图修改样式(边框、背景图、下拉三角按钮等)

请教,决策报表上的【下拉框控件】怎么按美工设计效果图修改样式(边框、背景图、下拉三角按钮等),如下图所示?

image.png

默认的下拉框直接放入不好看。

----------------------补充-----------------

决策报表下拉框添加了js事件,但没效果:

Form8.zip

FineReport jieujieu 发布于 2023-9-11 09:29 (编辑于 2023-9-12 12:40)
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
1
YmengLv5中级互助
发布于2023-9-12 13:57

setTimeout(function(){

$(".fr-trigger-editor").css({"border":"2px solid #51bafe","box-shadow": "inset 5px 0px 40px 0px rgba(81,186,254,0.8)",});//控件添加边框,阴影

$(".fr-trigger-text").css({"background": "none","border": "none"});//控件背景去除,边框去除

$(".fr-trigger-btn-up").css({"background": "none","border": "none"});//按钮背景去除,边框去除

$(".fr-trigger-texteditor").css({"color":"#ffffff","background": "none"}); //字体颜色修改,背景去除

},300) //延时300ms

body添加初始化后事件,若没效果可适当增加延时

根据你的控件边框修改边框和阴影颜色

image.png

最佳回答
0
snrtuemcLv8专家互助
发布于2023-9-11 09:30(编辑于 2023-9-12 13:34)

新自适应插件,下拉框样式

setTimeout(function() {//$(".bi-text-button").css({'background-color':'#032466','flont':'#FF0000'});

$(".x-icon").css({'background-color':'#032466'});//下拉箭头块背景色

$(".bi-vertical-layout").css({'background-color':'#032466'});//框内背景色

$(".bi-text").css({'color':'#FFFFFF'}); //文本颜色

$(".bi-text").css({'font-size':'15px'}); //字体大小

$(".bi-border").css({'border':'1px solid #051340'}); //边框

$(".bi-absolute-layout").css({'background-color':'transparent'});  //控件父级设置透明   

$(".bi-border").css({'border-radius':'18px 18px 18px 18px'}); //边框圆角

$(".x-icon").css({'border-radius':'18px 18px 18px 18px'}); //下拉箭头块圆角

$(".bi-vertical-layout").css({'border-radius':'18px 18px 18px 18px'});//子级圆角

$(".bi-vertical-layout").css({'box-shadow':'0px 0px 10px #FFFFFF'});//子级设置阴影

$(".bi-searcher.bi-v").css({"background":"blue"});//设置控件本身背景

}, 100)

11版本下拉框列表背景颜色

编辑前事件

setTimeout(function() {

$(".bi-v.list-view-outer.bi-card.list-view-shadow").css({"background-color":"red","color":"#999999","font-size":'12px',"text-align":"center"});//下拉列表背景,字体颜色大小

}, 100)

=============

效果

image.png

  • jieujieu jieujieu(提问者) 非常感谢您的回答!复制您的代码,测试没有达到效果,已上传了文件,详见上方问题底部补充部分。能否麻烦帮忙看看,是哪里不对吗?
    2023-09-12 00:51 
  • jieujieu jieujieu(提问者) 有做过的吗,能提供个frm示例文件参考下吗?
    2023-09-12 12:41 
  • snrtuemc snrtuemc 回复 jieujieu(提问者) 你这个是11版本,js不一样,看修改啊答案
    2023-09-12 13:34 
最佳回答
0
congerLv6高级互助
发布于2023-9-11 09:30(编辑于 2023-9-12 14:26)

参考这个,

新自适应需要单独找元素

https://help.fanruan.com/finereport/doc-view-1367.html

效果图

动画2.gif

  • 5关注人数
  • 1593浏览人数
  • 最后回答于:2023-9-12 14:26
    请选择关闭问题的原因
    确定 取消
    返回顶部