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.

Remove blue outline from button with ValoTheme.BUTTON_LINK style

BHARTESH DOSHI
6 years ago Aug 09, 2015 11:34am

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

Marko Grönroos
6 years ago Aug 09, 2015 6:38pm
BHARTESH DOSHI
6 years ago Aug 10, 2015 6:03am

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

Marko Grönroos
6 years ago Aug 10, 2015 6:43am

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.

Jouni Koivuviita
6 years ago Aug 10, 2015 2:55pm

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;
}
BHARTESH DOSHI
6 years ago Aug 11, 2015 8:46am
Ievgen Anikushyn
6 years ago Dec 29, 2015 2:39pm