Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Hudson_mod

Question

  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0

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.

Link to post
  • 0

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.

Link to post
  • 0

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.

Link to post
  • 0

@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;

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...