Share your repls and programming experiences

← Back to all posts
Playing with colours
rjlevy (218)

This dial changes colour and rotates with each number. All made with CSS - no JS used

Commentshotnewtop
python88 (119)

u did it without js? idk what it means but it sounds hard because people say that not using js is hard

rjlevy (218)

Hi @python88, this is a common trick where you use the state of the radio button to control the CSS.

In the CSS you will see the :checked pseudo-class selector being used. So when you click on a number, the hidden radio button gets selected and the CSS controls the position of the arrow and colour of the circular dial.

It took me a long time to work this out. I saw someone doing something like this on Twitter and thought it would be a good challenge.

Whenever possible, I try achieve things with CSS alone - without any JS.