Set backgroundcolor of a combobox

Hi there,

I’m trying to set the backgroundcolor of my combobox.

The css I’m using to color it:

.v-filterselect-input {
background: #7FA6C0;
color: #000000;

I also tried:

.v-filterselect {
background: #7FA6C0;
color: #000000;

But this colors the part behind my textfield instead of the textfield itself ( Probably because I didn’t define it must color the textfield part ).

The combobox is generated this way:

ComboBox typeTx = new TxTypeComboBox();

The element should be this one as I checked it with firebug but for some reason it just won’t do it.

Thanks in advance.

The ComboBox is a bit hard to style, because its appearance comes completely from images. Both background AND border come from the “vertical-sprites.png” image with the following rule:

.v-app .v-filterselect-input, .v-window .v-filterselect-input, .v-popupview-popup .v-filterselect-input {
    background: url("common/img/vertical-sprites.png") repeat-x scroll left -499px transparent;
    border: medium none;
    height: 16px;

ComboBox is a bit nasty in that the regular CSS border is disabled in Reindeer and it doesn’t like a border definition, such as “border: medium black solid”. It may be possible to get that working with some additional tweaking, but it may be hard to get it look nice with the button.

So, either change the background image (probably easier) or try to tweak it with pure CSS borders.

One reason for it not working is that your selectors are not specific enough. Marko’s post shows the styles from Reindeer, and as you see, the .v-filterselect classes are preceded with either the .v-app or .v-window class, making them more specific than your selector.

To fix this, just include the same selector as in the Reindeer theme to your own custom theme.

Ok thank you!

That made it work. I did the following to change my backgroundcolor + set a border:

.v-app .v-filterselect-input,.v-window .v-filterselect-input,.v-popupview-popup .v-filterselect-input {
    background: #7FA6C0;
    color: #000000;
    border: medium none;
    height: 16px;
    border-color: #A2A3A4 #BCBDBE #D2D3D4;
    border-left: 1px solid #BCBDBE;
    border-right: 1px solid #BCBDBE;
    border-style: solid;
    border-width: 1px;
    height: 15px;
    line-height: normal;
    margin: 0;

The above did not work for me. I saw no changes in the appearance of the combobox.

What I want to do is change the appearance of the box when it is disabled, to make it easier to read.

Thank you