Get started
Loading...
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.

Product icon
TUTORIAL

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

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

MenuBar.MenuItem.Checked background

Marek Michalowski
6 years ago Nov 21, 2015 10:40am

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!

Marek Michalowski
6 years ago Nov 23, 2015 2:34pm

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%);
}

 

+1
Joacim Päivärinne
6 years ago Jan 12, 2016 12:38pm

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.