Remove button blue focus rectangle on selected buttons

Hi,

There has been some discussion on the forum as long as 5 years ago as to how to have selected buttons not show the focus blue rectangle after it is pressed.

If I want to have a specific style, called for example, “nofocusborder”, how do I add this style to mytheme.scss?

As I am not very proficient with css, a complete example of the necessary entry would be appreciated.

Regards

Paul Fraser

Hi Paul,

Please keep in mind that the blue border is there for a reason (accessibility). Assuming you’re on Vaadin 8, you can do the following:

.v-button.nofocusborder:focus:after {
  border-color: inherit;
  box-shadow: none;
}

Thanks Joacim, works perfect.
There are many cases where the focus border looks out of place and/or ugly.
In my application I am using on a toolbar with toggle buttons and changing the color of the buttons to indicate state.