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 파일 입 니 다. 링크 로 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 의 다른 부분 을 다시 쓰 겠 습 니 다.
헤더 부분

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 */
}

신체 부분

.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;
}

단추 부분

.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 */
}

드 롭 다운 목록 부분

.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;
}