Radio Buttons - Custom CSS Style

Community resources Show & Tell
1

Hi,

I was looking for a solution to allow me to customise the look of the radio buttons on my website.

Here’s a simple JSFiddle which uses custom css to restyle the radio buttons. I’m not 100% sure how it works but I found it somewhere and I was able to tweak it to make it work just as I wanted.

This is how they normally appear in Webflow

2 Likes
2

Here are some more options on how to style checkboxes and radios with images.

The solution in action from @vincent
https://discourse.webflow.com/clicks/track?url=http%3A%2F%2Fcustomize-form.webflow.io%2F&post_id=215335&topic_id=53660

Discussions about the topic.

3 Likes
3

Here’s another solution http://css-checkboxes.webflow.io

2 Likes
4

@nwdsha @matthewpmunger

nice solutions! better than mine i think!

5

I’ve tried and tried your tutorial, even named my classes the same way, tried with checkboxes and radios, saved everything, published it. To no results.I spent hours trying to figure out why it wasn’t working and can’t explain why it’s not. The only difference is the type of URL for the button image, but I tried to just change the font-size on “checked” and nothing happened. Would it be possible you forgot something in your tutorial? Could Webflow have changed something since April 18?

My code - (same as yours).

input[type="checkbox"]:checked + label { font-size: 40px; background-image: url("https://uploads-ssl.webflow.com/5d80e3a88880e823cf8c7896/5d814ca66437b381610e2384_radio-btn-img.png"); }
2 Likes
6

Hey @Julien_Lallemand and everyone else seeing this :wave:

It’s now possible to add custom styles to radio buttons and checkboxes. Happy designing!

CC: @Diarmuid_Sexton @nwdsha

1 Like
7

Hi @matthewpmunger - the native Custom styling for checkboxes/radio still won’t let me customize the styling without using an actual radio button. Do you know if it’s possible to use the native styling to make something like a pill shape selector? with unselected and selected states? I feel like I’m missing something…

also the @Julien_Lallemand I also cannot get the css-checkboxes.webflow.io tutorial to work on my end either. Were you able to figure out a solution? All I did was change the bg color, and the class name to by relevant to my project. I was trying to do the “super custom radio buttons” part from that tutorial.

8

Hey @Amit_Garg :wave:

I recorded a loom video that walks through how to do pill selectors using the custom styles and checked state. Hope that helps!

1 Like
9

Thank you for the explanation! This is exactly what I was looking for. I have some tags that help me to filter the content on the site and needed some kind of interaction when they press on a tag. Sadly I can’t style the text but will think how to restyle it to keep the same text colour