I have to debug code, that some other person has written.

I have several input and select fields, all of them with outlines, but different ones. I did not find any way to change their behaviour and appearance

They look like the following:

How can I change this, so that all look simillar? I'm using Chrome on MacOS

Outline Nr1 Outline Nr 2

CodePudding user response：

You can use:

<input style="outline: none" >

Or either use this on css file

input {
  outline: none
}

CodePudding user response：

set this css in your global css file.

input:focus-visible {
  outline: transparent;
}

CodePudding user response：

Make sure the stylesheet you're using is the last stylesheet that is applied to make sure your stylesheet's property apply.

Also, make sure you have the highest selector specificity, to be 100% sure, give your input a class like no-outline (it will be better if you put your code here)

Use the following code:

.no-outline:focus {
    outline: none;
}

If none of this works then just add an !important tag in front of the code like

.no-outline:focus {
    outline: none; !important
}

Though, using the !important is not recommended unless you have been scratching your head for hours.

And....if nothing works, only if nothing works, you can set the property inline

<input type="text" style="outline: none">

Do let me know if you are still confused.