zTree⾃定义样式图标---纯CSS样式实现纯CSS样式覆盖，实现zTree⾃定义样式图标
1 . 效果样式（如下）
2 . 修改设置，隐藏默认图标
var setting ={
view:{
showTitle:false,
showLine:false,
showIcon:false,//不展⽰图标
selectedMulti:false,
dblClickExpand:false,
nameIsHTML:true,
addDiyDom: addDiyDom,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
},
}
3 . CSS样式覆盖（单独放置在css⽂件⾥，在zTree样式⽂件下引⼊）
#ztree1 .ztree li a.curSelectedNode {
background-color: #676666;
color: #fff;
}
#ztree1 .ztree li a.curSelectedNode:hover{    background-color: #676666;
color: #fff;
}
#ztree1 .ztree li a:hover {
background-color: #eee;
color:#333;
}
#ztree1 .ztree li a {
padding-left:10px;
box-sizing: border-box;
}
.ztree li line_open{
background-image: none;
color: #c0c4cc;
font-size:12px;
transform:rotate(0deg);
transition: transform .3s ease-in-out;
height:15px !important;
width:15px !important;
text-align: center;
font-family: layui-icon !important;
margin-top:0!important;
}
icon图标库.ztree li line_open:before{    content:"";
width:0;height:0;
display:block;
position: relative;
border-color:#c0c4cc #fff0 #fff0;
border-width:6px 5px 05px;
border-style:solid;
top:0;
left:20%;
}
.ztree li line_close{
background-image: none;
color: #c0c4cc;
font-size:12px;
transform:rotate(-90deg);
transition: transform .3s ease-in-out;
height:15px !important;
width:15px !important;
text-align: center;
font-family: layui-icon !important;
margin-top:0!important;
}
.ztree li line_close:before{    content:"";
width:0;height:0;
display:block;
position: relative;
/* 三⾓形---旋转 */
border-color:#c0c4cc #fff0 #fff0;
border-width:6px 5px 05px;
border-style:solid;
top:0;
left:20%;
}
注：如果不想要这种⼿写样式，可⽤字体⽂件（此处我⽤的是layui的字体）/*上⾯样式其余地⽅不变，以下四处发⽣改变*/
/* 引⼊layui样式，采⽤字体---效果⽐⾃⼰写的相对更为顺畅*/
.ztree li line_open{
background-image: none;
color: #c0c4cc;
font-size:12px;
transform:rotate(90deg);
transition: transform .3s ease-in-out;
line-height:18px !important;
text-align: center;
font-family: layui-icon !important;/*重点*/
margin-top:0!important;
}
.ztree li line_open:before{
content:"\e623";
}
.ztree li line_close{
background-image: none;
color: #c0c4cc;
font-size:12px;
transform:rotate(0);
transition: transform .3s ease-in-out;
line-height:18px !important;
text-align: center;
font-family: layui-icon !important;/*重点*/
margin-top:0!important;
}
.ztree li line_close:before{
content:"\e623";
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。