What is the difference when we use border and outline of none vs giving them a transparent color?
Hello, sorry to disturb you all, I have a question. I need to create a search bar. My search bar includes an
input element.
My question is, by default, input element has a border and an outline?
When we focus on an input, what happens? What causes the "thickness", is it the border or the outline? So is it good practice to set everything as none instead of giving them a transparent color in the scenario where we want our focus not to be on the input element but rather on its parent container?
https://codepen.io/Fakeur/pen/OPPBEgR7 Replies
I don't remember well but I know that I read somewhere that setting border or outline to
none can be problematic but don't remember exactly what can happen or if it's related to border, outline or bothborder is fine, outline is used for accessibility reasons to show which element has focus
ahh ok I see, like when we use tabbing etc, that's why we shouldn't use outline of none, it can be transparent though but even that, it's not really recommended since we don't really see what's being focus?
I'm not 100% up to date on best practices there, tbh, but setting it to transparent feels like it's defeating the purpose of visually indicating which element is active. That said, if you're replacing it with something else that's still visually distinct, which you seem to be doing, I don't think it's an issue
I'd love a second opinion on that though
yep I see, thanks !
outline is just another CSS property, is not exclusive to focus states or accessibility nor is it exclusive to field elements or links.
That said, it is however used by browsers as the default property to add when form fields and links get focus . Changing it's visibility is not normally recommended for accessibility reasons as Jochem has already stated.
If you do set it to none you should add a new focus state for the element so that it is clear to the user that the element has focus.
The reason that you may want to set it to transparent is so that you can then add a transition to add color when the element gets focus.
As a side note, unlike borders, outlines can be offset from the element whilst at the same time not taking up space (ie they don't add to the element size) so they do have their uses as a valid visual property.noted, thanks !