Remove blue outline from button with ValoTheme.BUTTON_LINK style

Flow
1

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

2

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.

3

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
20990.png
20991.png

4

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.

5

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;
}
6

Thanks… that worked.

I understand and agree on the intent of having the blue outline though!!!

Best regards,
Bhartesh.

7

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