DSP

zk listbox 去掉鼠标经过时的背景颜 {MOD}

2019-07-13 11:46发布

站内文章 / DSP
17832 0 1048
首先创建一个dsp文件,名字叫listbox.css.dsp,一定要这个名字,什么原因不知道,dsp里面的内容为:

<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>

.z-listitem {
background: none;
}
tr.z-listbox-odd {
background: none;
}
td.z-listcell,
tr.z-listgroup td.z-listgroup-inner {
border: 0px solid #000000;
box-shadow: inset 0px 0px 0 #1F1F1F;
}
tr.z-listitem-seld,
tr.z-listbox-odd tr.z-listitem-seld {
background: none;
}
tr.z-listitem-over,
tr.z-listgroup-over,

tr.z-listbox-odd tr.z-listitem-over,
tr.z-listbox-odd tr.z-listgroup-over {
background: none;
}
tr.z-listbox-odd div.z-listbox-header th.z-listheader-sort-over {
background: linear-gradient(top, #4f4f4f 0%,#1c1c1c 60%,#000000 100%); /* W3C */
}
tr.z-listgroup,
.z-listgroupfoot {
background: linear-gradient(top, #45484d 0%,#000000 100%); /* W3C */
}
tr.z-listgroup-seld {
background-color: none;
background-image: none;
}
tr.z-listgroup-over-seld {
background-color: none;
background-image: none;
}
.z-listgroup-img {
background-image: url('../img/arrow-toggle.png');
}
tr.z-listitem-over > td.z-listcell {
border: 0px solid #000000;
}




下面是listbox.zul文件: 注意要用link引入dsp文件

















可以看到背景颜 {MOD}不在了!!!
下面是重写listbox的其他的部分
header部分

div.z-listbox,
div.z-listbox-header tr.z-listhead, div.z-listbox-header tr.z-auxhead {
border: 1px solid #000000;
background: linear-gradient(top, #3F3F3F 0%, #131313 60%, #000000 100%); /* W3C */
}
div.z-listbox-header th.z-listheader, div.z-listbox-header th.z-auxheader {
border-color: #585858 #1F1F1F;
border-style: solid solid none;
border-width: 1px 1px 0 0;
}
.z-listheader-sort .z-listheader-sort-img {
margin-top: 0;
height: 0;
width: 0;
}
.z-listheader-sort-asc .z-listheader-sort-img,
.z-listheader-sort-dsc .z-listheader-sort-img {
background: none;
border-style: solid;
border-width: 4px;
height: 0;
width: 0;
}
.z-listheader-sort-asc .z-listheader-sort-img {
margin-top: -8px;
border-color: transparent transparent #D0D0D0 transparent;
}
.z-listheader-sort-dsc .z-listheader-sort-img {
margin-top: -3px;
border-color: #D0D0D0 transparent transparent transparent;
}
.z-listbox-header-bg {
background-image: none;
background-color: #1F1F1F;
}
div.z-listbox-header th.z-listheader-sort-over {
background: linear-gradient(top, #4f4f4f 0%,#1c1c1c 60%,#000000 100%); /* W3C */
}

body部分

.z-listitem {
background: #131313;
}
tr.z-listbox-odd {
background: #0D0D0D;
}
td.z-listcell,
tr.z-listgroup td.z-listgroup-inner {
border: 1px solid #000000;
box-shadow: inset 1px 1px 0 #1F1F1F;
}
tr.z-listitem-seld,
tr.z-listbox-odd tr.z-listitem-seld {
background: #000000;
}
tr.z-listitem-over,
tr.z-listgroup-over,

tr.z-listbox-odd tr.z-listitem-over,
tr.z-listbox-odd tr.z-listgroup-over {
background: #000000;
}
tr.z-listbox-odd div.z-listbox-header th.z-listheader-sort-over {
background: linear-gradient(top, #4f4f4f 0%,#1c1c1c 60%,#000000 100%); /* W3C */
}
tr.z-listgroup,
.z-listgroupfoot {
background: linear-gradient(top, #45484d 0%,#000000 100%); /* W3C */
}
tr.z-listgroup-seld {
background-color: #000000;
background-image: none;
}
tr.z-listgroup-over-seld {
background-color: #000000;
background-image: none;
}
.z-listgroup-img {
background-image: url('../img/arrow-toggle.png');
}
tr.z-listitem-over > td.z-listcell {
border: 1px solid #000000;
}


footer部分

div.z-listbox-footer {
border-top: 2px solid #3B3F39;
}
div.z-listbox-footer .z-listfooter {
background-image: none;
background-color: #0F0F0F;
}


input box 部分

.z-combobox-inp {
height: 30px;
padding: 2px 0 2px 4px;
font-size: 20px;
color: #FFFFFF;
border: 1px solid #000000;
border-radius: 3px 0 0 3px;
box-shadow: inset 1px 1px 0 #585858, inset -1px -1px 0 #0F0F0F;
}
.z-combobox-inp,
.z-combobox-focus .z-combobox-readonly {
background: linear-gradient(top, #3f3f3f 0%,#131313 60%,#000000 100%); /* W3C */
}
.z-combobox-focus .z-combobox-inp {
border: 1px solid #000000;
margin: 0;
}


button 部分

.z-combobox .z-combobox-btn {
height: 34px;
width: 30px;
border: 1px solid #000000;
border-left: 0;
border-radius: 0 3px 3px 0;
box-shadow: inset 1px 1px 0 #585858, inset -1px -1px 0 #0F0F0F;
}
.z-combobox .z-combobox-btn-over {
margin: 0;
}
.z-combobox-focus .z-combobox-btn,
.z-combobox-readonly ~ .z-combobox-btn {
border-left: 0px;
}
.z-combobox .z-combobox-btn,
.z-combobox .z-combobox-btn-over,
.z-combobox-focus .z-combobox-btn-clk, .z-combobox .z-combobox-btn-clk,
.z-combobox-focus .z-combobox-btn,
.z-combobox-readonly ~ .z-combobox-btn
.z-combobox-focus .z-combobox-btn-over,
.z-combobox-readonly ~ .z-combobox-btn-over {
background: url('../img/combo-btn.png') no-repeat 13px 9px, linear-gradient(top, #3f3f3f 0%,#131313 60%,#030303 100%); /* W3C */
}


drop-down list部分

.z-combobox-pp {
border: 1px solid #000000;
background-color: rgba(19,19,19,0.9);
}
.z-combobox-pp .z-comboitem,
.z-combobox-pp .z-comboitem a,
.z-combobox-pp .z-comboitem a:visited {
color: #FFFFFF;
background-color: rgba(19,19,19,0.9);
}
.z-comboitem .z-comboitem-text {
border: 1px solid #1F1F1F;
padding: 4px 0;
}
.z-combobox-pp .z-comboitem-over,
.z-combobox-pp .z-comboitem-seld {
color: #2BCCDA;
background-color: #000000;
}

热门文章