Override Default Border on Input
I am working on the tip calculator project on frontendmentor and I've used :hover, :focus and :active to adjust the border color of the custom tip input box but it still defaults to the blue border when I start typing in both chrome and firefox.
Here is my deployed project so far: https://calculate-and-split-tip.netlify.app/
My codebase is here: https://github.com/mathematiCode/Tip-Calculator-FEM
I've tried commenting out all of my js, in devtools it shows that the styles in the :focus, :hover selector are being applied but it keeps changing the color to the default blue when I start typing.
I am using vanilla CSS and JS btw.
GitHub
GitHub - mathematiCode/Tip-Calculator-FEM
Contribute to mathematiCode/Tip-Calculator-FEM development by creating an account on GitHub.
10 Replies
it's an outline, not border
and you should set a good color for it
Ahh that was it, thank you so much. I just set the outline to none.
and you set a different color on the border when it is focused, right?
Yup! So it looks like on chrome the outline was covering my border. But on the Firefox video you could see both. It works correctly now, you can only see the border I’ve set. I just haven’t deployed the correct version yet.
as long as the border/outline changes to a color that's obvious, anything is fine
Doesn’t have to be border/outline to show focus although that’s most common. Any big change that a user can recognize what element is being focused on will do
That’s why I’m loving :has(:focus-within) and can change the parent to highlight whether a child has focus in it so it’s very clear where the user is on the form
oh, yeah, changing the background or something else is possible, but does get very weird
def can get weird but with the right ui it works, it can be subtle just to highlight but also clear what has focus. weird and ugly is still better than no indication at all in my book
i agree with you
I haven't used :has or :focus-within yet but that does seem super useful!