This content originally appeared on DEV Community and was authored by chaderenyore
You might have noticed that in newer versions of web browsers there is this dark outline in forms, buttons after they are clicked and many more, Now what are those things, why are they there and how can you remove them? (cause to be sincere these aren't beautiful)
It usually shows when it's focused, or active. (Pseudo selector for focus, :focus) And Focus has this outline property it's the browser defaults.
The outline is comparable to a border but it's not part of the box model, It is like a lighter version of the border.
You can style it with the outline property.
To remove it, outline: none;
It's usually displayed when the element is focused so use the focus Pseudo class
button:focus {
outline: none;
}
You can set the outline to a different look maybe its width, its color too, you can also add a border-radius to it too and also make it like a normal border
see MDN For a complete reference of what you can set with the outline https://developer.mozilla.org/en-US/docs/Web/CSS/outline
With that, you have full access to your input or button outline and remove ugly outlines by the browser defaults. Now go give that outline a great look??
This content originally appeared on DEV Community and was authored by chaderenyore
chaderenyore | Sciencx (2021-05-10T00:57:11+00:00) Understanding Outlines in CSS, overwriting browser defaults.. Retrieved from https://www.scien.cx/2021/05/10/understanding-outlines-in-css-overwriting-browser-defaults/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.