ComboBox border color when selected

Flow
1

Hello.

I have a question about ComboBox style.

When it is selected, it gets a blue border color (s. image ComboBox). How can I change this color?

I have tried different combinations of .v-filterselect-focus, .v-filterselect-input, .v-filterselect-button and so on,
but I don’t find the right way to change the border color. The following has helped me to set the border color to green,
when ComboBox is selected (s.image myComboBox), but I know, that it is the wrong solution, because, when I set the border to 5px,
I can see, that the ComboBox has still the blue border color and only the outside border color has changed (s. image wrongSolution) :frowning:

.registrationView .v-filterselect-focus {
border: 1px solid #7BA400;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
}

Please help me.

Thank you very much in advance,
Best,
Elena
12779.jpg
12780.jpg
12781.jpg

2

You don’t mention the theme or vaadin version you’re using, so I’m assuming the latest V6 and the default reindeer theme. If you look at the ComboBox via inspect element you’ll see that the borders are actually images. See background-image css rule for .v-filterselect and .v-filterselect-button.

Unfortunately the answer to your question is that if you want to do this properly, you will have to create your own background images. You can take the ones from reindeer theme as basis so it should not be too much work.

3

Thank you very much for your reply!

Actually, I’m using Vaadin 7 with the default reindeer theme.
Does the version change something on the solution in this case?

4

Just checked that and as far as I can see, it does not. The borders are still created with a background image, just as in V6. My previous statement was just meant as a disclaimer that I didn’t actually check this on V7 :).