修改下拉框控件边框颜色的JS代码有人知道吗

修改下拉框控件边框颜色的JS代码有人知道吗

FineReport 嘘.. 发布于 2024-1-30 15:18
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
LTC朝Lv6高级互助
发布于2024-1-30 15:19(编辑于 2024-1-30 15:20)

setInterval(function() {

$('.fr-trigger-texteditor').css('border', 'none');

$('.fr-trigger-text').css('border', 'none');

$('.fr-trigger-text').css('border-left', '1px solid #9E9E9E');

$('.fr-trigger-text').css('border-top', '1px solid #9E9E9E');

$('.fr-trigger-text').css('border-bottom', '1px solid #9E9E9E');

$('.fr-trigger-btn-up').css('border-top', '1px solid #9E9E9E');

$('.fr-trigger-btn-up').css('border-bottom', '1px solid #9E9E9E');

$('.fr-trigger-btn-up').css('border-right', '1px solid #9E9E9E');

$('.fr-trigger-texteditor').css('background', '#F2F2F2');

$('.fr-trigger-btn-up').css('background', '#F2F2F2');

$('.fr-trigger-text').css('background', '#F2F2F2');

//设置下拉、下拉复选、日期控件圆角

$('.fr-trigger-text').css('border-radius', '8px 0 0 8px');

$('.fr-trigger-btn-up').css('border-radius', '0 8px 8px 0');

//设置下拉框与下拉复选框下拉三角的颜色

$('.fr-trigger-center').css('width', '0px');

$('.fr-trigger-center').css('height', '0px');

$('.fr-trigger-center').css('margin', '0 2 0 0');

$('.fr-trigger-center').css('background', '#F2F2F2');

//将方块分为四个三角,上面的三角设置显示色

$('.fr-trigger-center').css('border-top', '6px solid #1AB436');

//其他三个三角设置与背景色相同

$('.fr-trigger-center').css('border-left', '6px solid #F2F2F2');

$('.fr-trigger-center').css('border-bottom', '6px solid #F2F2F2');

$('.fr-trigger-center').css('border-right', '6px solid #F2F2F2');

}, 50)

效果如下:

image.png

最佳回答
0
Z4u3z1Lv6专家互助
发布于2024-1-30 15:19

setInterval(function(){

//下拉框向下箭头的背景色

$(".fr-trigger-btn-up").css("background", "#A2A2BA").css("border", "0px solid #FDC11D");

//下拉框打开前字体颜色

$(".fr-trigger-texteditor").css("color", "#323F53").css("background", "#ffffff");

//打开前边框设置

$(".fr-trigger-text").css("border", "0px solid #1130d4");

//下拉框字体

$(".fr-combo-list").css("font-family", "阿里巴巴普惠体").css("color", "#4488EF");

//下拉框外部边框

$(".fr-combo-list").css("border", "0.5px solid #E3E6ED").css('border-radius', '2px').css

("background", "#ffffff");

//下拉框 选中 边框

$(".fr-datepicker tbody td.selected").css("border", "0px solid #1B1B1C").css('border-radius', 

'1px');

},100)

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

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)

最佳回答
0
ID1208Lv6高级互助
发布于2024-1-30 15:23

image.png

下拉框初始化事件

image.png

setTimeout(function(){

$(".fr-trigger-text").css("border","1px solid red");

},100)

  • 3关注人数
  • 278浏览人数
  • 最后回答于:2024-1-30 15:23
    请选择关闭问题的原因
    确定 取消
    返回顶部