Adaptable 3.10.1.2 : How to override a:focus styles (css)?

Adaptable 3.10.1.2 : How to override a:focus styles (css)?

by Alexey A -
Number of replies: 4

Hello!

First of all, sorry for my English. It is no my native language.

Does anyone know how to override a:focus styles?

I need to remove blue background and underllines from focused links (selected using Tab button or left mouse button).

Thanks in advance!

Theme: Adaptable 3.10.1.2

Moodle: 3.10.4+ (Build: 20210511)

(if necessary, I can update both Moodle and Adaptable up to the current versions)

Attachment moodle_links_css.PNG
Average of ratings: -
In reply to Alexey A

Re: Adaptable 3.10.1.2 : How to override a:focus styles (css)?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Did you solve this? If not then have you tried the browser development tools to work out the selector you need for some custom CSS?
Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable 3.10.1.2 : How to override a:focus styles (css)?

by Alexey A -
Thank you for your answer, Gareth
I was trying to investigate problem using browser development tools, but I'm not familiar with the CSS, so I could not understand from whom the property is inherited. It seems to me that this is due to bootstrap, at list code below slightly changes the appearance (in some places the blue background disappears)

The problem still exists. I'm not even upset about the color when clicking on the links, but the color when clicking on the site logo in the upper left corner of the header.

:focus {
    outline-style: none;
    outline-width: 0px !important;
    outline-color: none !important;
}
a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
outline: 0!important;
outline-color: transparent!important;
outline-width: 0!important;
outline-style: none!important;
box-shadow: 0 0 0 0 rgba(0,123,255,0)!important;
}
Average of ratings: -
In reply to Alexey A

Re: Adaptable 3.10.1.2 : How to override a:focus styles (css)?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Try the custom CSS:

a:not([class]):focus {
    background-color: transparent;
    box-shadow: none;
}
Average of ratings: Useful (4)
In reply to Gareth J Barnard

Re: Adaptable 3.10.1.2 : How to override a:focus styles (css)?

by Alexey A -
Thank you very much!
Much better with this code! In some places the background has remained, but everything has become much, much better!
Average of ratings: -