js/css改变日期控件的样式

image.png想要修改日期控件点击后出现的下拉列表的样式,改变边框线条的颜色,在把蓝色改成紫色。有没有做过类似的js/css,求分享一下。

-----

image.png

把鼠标移上去后,又会出现蓝色的边框,这个js怎么改呢?

saimon 发布于 2019-11-11 14:23 (编辑于 2019-11-11 15:13)
1min目标场景问卷 立即参与
回答问题
悬赏:6 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共3回答
最佳回答
0
杨朝健Lv5中级互助
发布于2019-11-11 15:05(编辑于 2019-11-11 15:40)

.fr-datepicker table.dt,.fr-datepicker table.mt{border:#98c0f4 1px solid;}

.fr-datepicker thead tr.mainhead td{border-bottom:1px solid #98c0f4;}

.fr-datepicker table td.wn{border-right:1px solid #98c0f4;}

.fr-datepicker tfoot tr.optbtns td.btn{border-top:1px solid #98c0f4;}

.fr-datepicker td.time{border-top:#98c0f4 1px solid;}

相关的样式如上,初始化脚本:

var a=document.getElementById("frdatepickerpurpleborder");

if(!a){

 var style = document.createElement('style');

 style.type = 'text/css';

 style.id='frdatepickerpurpleborder';

 style.innerHTML=`

.fr-datepicker table.dt,.fr-datepicker table.mt{border:purple 1px solid;}

.fr-datepicker thead tr.mainhead td{border-bottom:1px solid purple;}

.fr-datepicker thead tr.mainhead td:hover{border:1px solid purple;}

.fr-datepicker table td.wn{border-right:1px solid purple;}

.fr-datepicker tfoot tr.optbtns td.btn{border-top:1px solid purple;}

.fr-datepicker tfoot tr.optbtns td.btn:hover{border:1px solid purple;}

.fr-datepicker td.time{border-top:purple 1px solid;}

`;

 document.getElementsByTagName('HEAD').item(0).appendChild(style);

}

最佳回答
0
张洪威Lv6高级互助
发布于2019-11-11 14:59

image.png


setTimeout(function() {

$(".fr-date-trigger-center").click(function() {

$('.dt,.mt').css({"border":"1px solid purple"}) ;

$('.title,.btn.prevm,.btn.nextm').css({"border-bottom":"1px solid purple"});

$('.btn.clear,.btn.today,.btn.ok').css({"border-top":"1px solid purple"});

$('.name.wn').css({"border-right":"1px solid purple"});

     $("[class^='week wn']").css({"border-right":"1px solid purple"})

}) 

}, 100)


  • saimon saimon(提问者) 将鼠标移动到单个控件上时,又会出现蓝色的边框,这个怎么改呢?
    2019-11-11 15:14 
  • 杨朝健 杨朝健 回复 saimon(提问者) 试下我的
    2019-11-11 15:40 
  • 张洪威 张洪威 回复 saimon(提问者) 楼下那大佬的就行,你可以试下。
    2019-11-11 15:45 
最佳回答
0
jiangxueLv4见习互助
发布于2020-11-12 17:32

.fr-datepicker table.dt, .fr-datepicker table.mt {

    border: #a8ade0 1px solid;

}

.fr-datepicker tfoot tr.optbtns td.btn {

    background-color: #a8addf6b;

    border-top: 1px solid #a8addf;

}

.fr-datepicker tfoot tr.optbtns td.hover {

    background-color: #878ee0;

    border-top: 1px solid #5A65E2;

}

这个是css文件,请问楼主的控件样式,可以分享吗?可以指定某个月份控件的样式?

  • 4关注人数
  • 3077浏览人数
  • 最后回答于:2020-11-12 17:32
    请选择关闭问题的原因
    确定 取消
    返回顶部