Border and outline on focus on input text field
Hello, small question, I forget that each time, when we click/focus on an input text field, we do get a border or an outline? Or both?
Now say I don't want that border/outline, do we set it to none or transparent?
11 Replies
I think we have both, no? I was experimenting with the input field
we have both a border which is displayed when we either focus or not, then we have the outline which appears on focus?
Is there a way to verify that with dev tools? I try to use dev tools but like I can't focus and click on dev tools at the same time
there's an inset border by default, the focus is an outline
Yep I see, is there a way I can see it in my dev tools?
for the border I was able to see it
but for the focus I'm not able to see the styles :c
in firefox you can toggle pseudoclass states, not sure about chromium
it's at the top of the rule list
probably exists in chromium too
Ok I will have a look, thanks !
There's a .hov button in the styles tab
You can toggle element states from there
yep just saw that, I've a question though, is there a difference between focus vs focus-visible?
Yeah, mdn can explain it better than me
There's probably a section on the page for focus and focus-visible
MDN Web Docs
:focus-visible - CSS: Cascading Style Sheets | MDN
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)
In very simple terms, focus-visible is newer pseudo class that basically is only applied when an element gets focus via the keyboard (as opposed to the mouse or other method). It is now generally preferred over the more generic :focus selector
oh ok, thanks !