zk listbox 去掉鼠标经过时的背景颜色

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

<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
<c:if test="${c:browser('gecko2') || c:browser('ie9') || c:browser('opera') || c:browser('safari')}">
.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;
}
</c:if>

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

<?link rel="stylesheet" type="text/css" href="listbox.css.dsp"?>
<zk>
    <listbox id="box1">
        <listhead sizable="true">
            <listheader label="name" />
            <listheader label="gender" sort="auto" />
        </listhead>

        <listitem>
            <listcell label="Mary" />
            <listcell label="FEMALE" />
        </listitem>

    </listbox>
</zk>

可以看到背景颜色不在了!!!
下面是重写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;
}