Combobox and OptionGroup selection color change Valo

Celvin Kattookaran

I'm trying to change the default blue color (gwt-menuitem-selected)

Is there a way to do this, I tried adding

.gwt-MenuItem-selected {
            background-color: #0EE50C;
            background-image: linear-gradient(to bottom, #1EE727 2%, #12C51A 98%);
            color: #F0F8EC;
            text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.05);
}

That didn't work though, if I use .gwt-MenuItem then it changes the whitebackground, I don't want that :(

If I use .v-filterselect-suggestpopup .gwt-MenuItem-selected, then background-image still remains.

Can someone please help me with this?

valo combobox.png (4.7 kB)

Johannes Laidler

Hi Celvin,

you can define the selection color by changing the "$v-selection-color" variable.
Just set the variable before you import the valo theme.

$v-selection-color: #008000;

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

}

Also take a look the the valo api ( https://vaadin.com/api/valo/ ) for more info.

best regards

Johannes

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Combobox and OptionGroup selection color change Valo

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.