blue border around button when state focus

There is a blue border around the button when state is focus (click hold). When analysing with the browser one sees "user agent stylesheet" which says this would be browser fallback.

So there "is missing" a bonnex chosen style sheet. Where and what should be implement (maybe in common.css in base template) in one of the css files to override this falllback solution. 

Please see image for further information.

It would not be done in common.css. It should be in anchor.css which has all the css for links.

However, that does not look like one of the default templates included with dolphin. I cannot reproduce the problem on my site.

If your using a different template, then the template developer should be contacted so the issue can be corrected in the proper css file for that template.

If it is a default dolphin template, then what template is it? and what page are you viewing? so i will know where to look on my test sites to reproduce the problem.

If your not using one of the default dolphin templates, you could also switch to the default UNI template and see if the problem still exists.

I did this modification to the standard EVO template mysellf. You can view this on the demo page itself. You have to change the button color in order to see the blue border (hold button clicked or enforce focused state on it).

See attached image of dolphin demo in articles module for example: http://demo.boonex.com/m/articles/view/KEEP-THE-OCEAN-CLEAN 

Hello mrtn!

Well, common.css looks like the place where the change may be applied, see the attached image.

I found this piece of advice: https://medium.com/hackernoon/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

I added outline: none into the common.css at 

.bx-btn {

position: relative;

border-width: 1px;

background-color: rgba(255, 255, 255, 1.0);    

background-image: none;

filter: none;

text-transform: none;

text-shadow: none;

font-weight: unset;

font-size: 16px;

outline: none;

}

.bx-btn,

.bx-btn:hover {

box-shadow: inset 0 0px 0 rgba(0, 0, 0, 0.1);

color: #383838; 

}

.bx-btn:hover,

.bx-btn:active { 

background-color: rgba(230, 230, 230, 1.0);

outline: none;

And now the blue ring is gone.