Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 1 month ago
MenuBar.MenuItem.Checked background
Hi,
How can I set custom background to items in checked state in menubar?
I have MenuBar without any submenus, with items set to checked on click:
for(MenuItem menuItem: menuBar.getItems()) {
menuItem.setChecked(false);
}
selectedItem.setChecked(true);
I want to set custom backgroud color for checked item. I tried this:
.v-menubar-menuitem-checked {
background-color: #4ba5ff;
background-image: linear-gradient(to bottom, #51acff 2%, #4296f4 98%);
}
In firebug it seems that background-color is set, background-image is not, and both are overwritten somewhere.
Thanks!
Last updated on
I've answer to my own question:
.v-menubar > .v-menubar-menuitem-checked {
background-color: #4ba5ff;
background: -webkit-linear-gradient(top, #51acff 2%, #4296f4 98%);
background: -moz-linear-gradient(top, #51acff 2%, #4296f4 98%);
background: -ms-linear-gradient(top, #51acff 2%, #4296f4 98%);
background: linear-gradient(to top, #51acff 2%, #4296f4 98%);
}
Last updated on
+1
If you're using Valo, you can use Bourbon's linear-gradient mixin so that you don't have to write all those vendor prefixes.
Last updated on
You cannot reply to this thread.