Remove Valo button outline

Vaadin 6 / 7 / 8
1

Hi all,

I’ve been using the Valo theme and I’m very happy with it. However, I want to remove the outline for a focused button (not for all buttons, but for one special case) with CSS, but setting outline to none has no effect. What style should I apply to remove the outline?

Thanks for any help :slight_smile:

2

Hi,

Actually, it’s not outline that the Valo theme changes for the focused button. Instead, it adds border and box-shadow to the :after element. So you could remove those like this:

Java:
button.addStyleName("mystyle");

sass:
.mystyle:focus:after {
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}
3

Hi Jarno,

thanks again!