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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Remove blue outline from button with ValoTheme.BUTTON_LINK style
Hi,
I am using Valo theme and having few buttons set to ValoTheme.BUTTON_LINK style. When these button get focus they show a blue border / highlight / outline!!! which I don't want. I tried following in my CSS but did not work:
.v-button-link:focus {
padding: 0px;
border: none;
outline: none;
}
I tested this on Chrome and IE11.
Any help on how this can be achieved?
Best regards,
Bhartesh
That's strange, I don't see any such focus outline in this example. I tried both with Firefox and (some version) of Chrome. If it's really pale, I might not see it in my monitor.
I'd recommend using the built-in inspector in Chrome (Ctrl+Shift+I) to study and experiment with the styles. In Firefox, you can either use the internal inspector or Firebug.
Note that in Valo, many components use box-shadow CSS property to have border, shadow, or inset. You could try disabling that. Perhaps there's some other property as well.
Thanks Marko.
I opened the demo page from the link you provided and thats exactly how I want it to be, but unfortunately thats not how it is being displayed in my application. The following demo for Valo theme also shows the blue outline just like what I see in my application:
https://demo.vaadin.com/valo-theme/#!buttons-and-links
Now that is indeed very strange !!!
Best regards,
Bhartesh
Ok, yes I can see it in that demo. Looking at it with FireBug shows that focusing the button brings up a ".v-button:focus::after" rule that sets the box-shadow property. Well, it does also set border color, where the border is defined in a rule matching ".v-button::after", but that doesn't seem to cause the bothering focus outline.
I don't see any settings in the Valo demo sources that could affect that. The _button.scss defines the button focus styles, but I can't see how that's different in the two demos, as I think both use defaults for the button styling.
In any case, setting something like ".v-button:focus::after {box-shadow: none}" probably disables the focus indicator.
HI guys,
The blue outline is there by design, to indicate to the user where the keyboard focus is, and is really needed by people who only use the keyboard to navigate an app. So if you decide to hide the focus outline, just notice it will make it harder for people to use it with the keyboard.
You should be able to disable the outline with the following CSS:
.v-button-link:after {
content: none;
}
Thanks... that worked.
I understand and agree on the intent of having the blue outline though!!!
Best regards,
Bhartesh.
Hi guys.
Yeah, content: none; does the trick, but you'll lose the press effect, it's kind of clicking the label. And that's not good as for me.
Best regards,
Jenia