Changing the colour of a combobox in ZK

Question

Hi I am a novice in ZK and I would like to change the selected cell of a combobox from light blue, the standard colour, to green. I have been looking for online resources but somehow I couldn't fine anything. Any tips? Thanks in advance!

Answer 1

Changing colors in ZK is done by apply/override css to the element.
The css class your looking for is .z-comboitem:hover.
Just add the following to the .zul

<style>
.z-comboitem:hover {
    background: /* your color here*/; 
 }
 </style>

Pleas read this for more information.

EDIT

Sorry my answer is for changing the the hover color not the selected and the first version I refered to the wrong CSS class...
@kachhalimbus answer should be the best, especially because he has for sure much more experience than me. So thanks to @kachhalimbu :)

Answer 2

I think this is exactly what you are looking for i.e. selected item in the dropdown should be green instead of default light blue

<zk>
<style>
.z-combobox-rounded-pp .z-comboitem-seld, .z-combobox-pp .z-comboitem-seld {
    background: green;
}
</style>
<window border="normal" title="hello">
    <combobox>
      <comboitem label="item 1"/>
      <comboitem label="item 2"/>
      <comboitem label="item 3"/>
      <comboitem label="item 4"/>
    </combobox> 
</window>
</zk>

You can see a live demo of this here (with 6.0.1 breeze theme) but same code should work with ZK 6.5.1 freshly as well