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
You can use:
<input style="outline: none" >
Or either use this on css file
input {
outline: none
}
set this css in your global css file.
input:focus-visible {
outline: transparent;
}
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.