Stop control buttons from 'remain selected' after being clicked

Problem When you click zoom in/zoom out the button you just clicked remains a darkened colour, until you click away. I would like the buttons to only change colour while you are hovering over them and then go back to normal once you are no longer hovering over them.

Google maps doesn’t do this, and from a user interface perspective it doesn’t make sense.

Solution This is all done in ol.css from lines 162 to 166 I want to get rid of the line ‘.ol-control button:focus’ from the below code so that the same behavior that is applied to hover does not get applied to the focus.

.ol-control button:hover,
.ol-control button:focus {
    text-decoration: none;
    background-color: rgba(0,60,136,0.7);
}

[tonio]

I agree with @frasersab that control buttons should not remain displayed focused after moving the pointer away from them.

It’s the case if you don’t focus it by clicking. If you click it, it’s standard behavior to be focused.

The default should be to not focus on a standard map, and only focus when the map container has a tabindex attribute, which is needed to enable accessibility options anyway.

Well, that’s not true. On the simple example, a click on the zoom button make it have focus, meaning they are keyboard triggerable after this. If you force unfocus, you need to re-focus the button before being able to trigger.

If the focus is kept, hiding it is a bad practice.

[ahocevar]

I agree with @frasersab that control buttons should not remain displayed focused after moving the pointer away from them. The default should be to not focus on a standard map, and only focus when the map container has a tabindex attribute, which is needed to enable accessibility options anyway.