Is it possible to change the style of radio buttons & check boxes?

Site URL: https://www.theministryofdesign.co.uk

@tuanphan is it possible to style radio buttons, drop downs & check boxes within forms? I’ve managed to do input fields & text styles but can’t work out how to do the radio boxes etc. Any help would be greatly appreciated.

Where is form?

Hi,

https://theministryofdesign.co.uk/projects/survey

PW: helpmetuan

Thanks for the advice.

Change color, size or?

Hi @tuanphan, I'm looking to change the color and size to fit in more with the rest of the site so the dot on the boxes is orange, the circle around is white. The same for drop downs too really, just so they fit in a bit better.

Thanks for the help.

You can't change radio checkbox color with CSS. I also have this problem on my client site. Still testing some code to solve this.

following...

My little bit of research into this seems to be that you need to hide the original checkbox and create a new pseudo element. Then you need to bind the click to it but I haven't gotten it to work.

just finished on a client site.

yes, you need to hide original, create new checkbox with JavaScript, very time consuming

If you share link to your site, we can help easier.

Thanks @tuanphan but my client decided to lose the checkbox altogether! That would be a great resource to share here though. It has come up for me before since every browser has it's own different look.

@jaeveedee, @tuanphan - I've managed to alter the check box & radio box elements (see below) - it's a little more work to change the drop down selection menus and I haven't had any success with those yet. Any input would be great…

/* Radio Buttons */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.option input[type="radio"]:active {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#0e1021;
  border-radius:50%;
}
/* Selected */
.option input[type="radio"]:checked {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#e9530d;
  border-radius:50%;
}

.option input[type="radio"] {
/* un-selected */
  background-clip: content-box;
  border: 4px solid #e9530d;
  border-radius: 50%;
  content: " ";
  cursor:pointer;
  width:30px;
  height:30px;
}

/* check boxes */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.option input[type="checkbox"]:active {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#0e1021;
  border-radius:50%;
}
/* Selected */
.option input[type="checkbox"]:checked {
  cursor:pointer;
  width:30px;
  height:30px;
  background-color:#e9530d;
  border-radius:50%;
}

.option input[type="checkbox"] {
/* un-selected */
  background-clip: content-box;
  border: 4px solid #e9530d;
  border-radius: 50%;
  content: " ";
  cursor:pointer;

so awesome @Hudson_mod. You're missing a height/width on the unselected checkbox but otherwise working perfectly for me! 

@herzworks probably a copy paste error from me in the thread 😄

Hey everyone! Two things:

1) Is there a way to change the colour of the text of the Checkbox and Radio options?

2) Is there a way to change the colour of the active text input in the field?

See below: I've made this red just as an example (so I can see what I'm testing easily). I eventually want to be able to put the form on a dark background.

Thank you, thank you!

8 hours ago, OldLadyStudio said:

Hey everyone! Two things:

1) Is there a way to change the colour of the text of the Checkbox and Radio options?

2) Is there a way to change the colour of the active text input in the field?

See below: I've made this red just as an example (so I can see what I'm testing easily). I eventually want to be able to put the form on a dark background.

 

Thank you, thank you!

 

Can you share page url?

Was messing around trying to figure this out too and did this:

For styling checkbox stuff (not the actual check box though):

.form-wrapper .field-list .option {
}

For styling the drop down and text:

.form-wrapper .field-list .field select {
}

Not sure if this is good/logical but it worked for me!