xilli
KPCKevin Powell - Community
•Created by xilli on 8/6/2024 in #front-end
Custom Radio Button with Animation
Hey all, I'm developing a custom Radio Button. It's going great so far. Had to hack quite a bit to match the requirements.
I've come up with 2 solutions. A simple one and a more complex one and I'd like to hear your feedback and see, how you would do it.
The first solution is a simple one: https://codepen.io/maxkuhlmay/pen/BagZVxy
It has a Radio Button and when its checked, the border width changes to create the "dot".
There are 2 problems:
I'd like to create a transition with cubic-bezier instead of ease to create a bouncing effect. Does anybody know, how to use cubic-bezier?
The Figma files say, that the background color of the radio changes to turquoise, when its checked.
Is there a way, to create that background? the background-color property would change the dot color. This should stay white.
I tried to recreate this behaviour with the second codepen: https://codepen.io/maxkuhlmay/pen/xxorXpj
This time I'm using ::before and ::after to create the Background and the Dot. The Dot increases in size to make a "bouncing" effect.
How would you do it?
I cant wait to see your solutions to learn 🙂 🙂
PS.: This CSS is still WIP and I'm trying to refactor some variables 🙂
8 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
Hey. We are currently styling an input element and we try to show the outline when the user navigates by keyboard.
There is the selector :focus-visible for that. Unfortunately it also gets triggered when we navigate by mouse.
I’ve found out, that is a new and intentional behavior for inputs.
Buttons and links work just fine.
Is there a way to only show the outline when navigating by keyboard and not by mouse?
Thanks 😀
13 replies