Question about Microsoft Edge

[BronzeHeart92]

First off, apologies if the following reply can sound a little bit too geeky for your tasters. With that out of the way, I would like to ask you about MS Edge. Specifically, is there a way to turn off the focus rings the browser forces upon most of the text boxes? One of the reasons why I've been using Firefox these past years is that the browser doesn't do that, at least when you have the proper about:config settings activated as of the latest versions. As for the text boxes themselves, I mean the ones that are basically half way between default and sufficiently customized. As the case might be, those forced focus rings can be quite an eyesore for the most part and since MS Edge doesn't have about:config, I wonder if there's other solutions available. CSS hacks I can use perhaps?

 

[Tsutarja]

By focus rings, do you mean the outlines that pop up whenever you press the tab key on a webpage? Does clicking on anywhere on the page that isn't focused on not make it disappear?

 

[Duck]

The traditional CSS to get rid of the outlines is to use

textarea:focus, input:focus{
    outline: none !important;
}

Or, if you want to make sure triple sure nothing will ever get that outline

*:focus{
    outline: none !important;
}

So any add-on that injects custom CSS (I think Greasemonkey and its derivatives / forks can do it) should be able to handle it.

That said, just in case someone's a dev and is reading this, please don't do this for user facing projects. It's an accessibility bad practice.

 

[BronzeHeart92]

By focus rings, do you mean the outlines that pop up whenever you press the tab key on a webpage? Does clicking on anywhere on the page that isn't focused on not make it disappear?

I mean the borders that appear once you begin typing on most text boxes. Now, I suppose these ones are customized enough so that they won't appear on browsers like Edge. But what if certain pieces of code are missing causing those focus rings to appear anyways despite the custom appearance? More often that not, they would be quite an eyesore, especially if the input field in question already has a focus ring of it's own that's already there.

 

[BronzeHeart92]

The traditional CSS to get rid of the outlines is to use

textarea:focus, input:focus{
    outline: none !important;
}

Or, if you want to make sure triple sure nothing will ever get that outline

*:focus{
    outline: none !important;
}

So any add-on that injects custom CSS (I think Greasemonkey and its derivatives / forks can do it) should be able to handle it.

That said, just in case someone's a dev and is reading this, please don't do this for user facing projects. It's an accessibility bad practice.

Let me give you some examples that can be found here: https://imgur.com/a/BLxx0xo

First off, Newgrounds. As you can see, it doesn't have focus rings on Edge, hence they use customized input fields that blocks browsers from implementing them.

The next example is from Weasyl. As you can see, despite the customized appearance of their input fields used on that site, ultimately they're only a 'shell' and Edge will force focus rings on them anyway. In other words, they lie at a half way point between default and customized input field. This is the kind of behaviour that I want to get eradicated from Edge, hence the topic of this thread at hand.

And as a bonus, I took a screenshot from Pokecommunity as well and it kinda proves that this site also uses fully customized input fields, at least on this theme.