Styling checkboxes, radio buttons and dropdowns

Question

How can I style HTML checkboxes, radio buttons and dropdowns? Or can I?

I'd like to use an image for checkboxes or radiobuttons, and the same for lists - the dropdown arrow doesn't look nice most of the time.

Answer 1

see this 2 links for jQuery Plugins for Styling Checkbox & Radio Buttons:

http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Answer 2

Short answer: You can't do it nicely and consistently.

The answer you might want to hear, depending on your situation: Use jQuery or something similar, which will give you plenty of plugins to choose from.

These two are some of the better ones, as it will let you style just about all of the different controls.

Answer 3

You certainly can,

Checkboxes and Radio buttons are easy to customize with just css (no js). The implementation (already mentioned by KunalB above) involves hiding the input and using the label (with the before pseudo element for the custom image) to trigger the input

Dropdowns on the other hand are a lot more difficult and to date there's no 100% pure-css + cross-browser solution... (Here's my S.O. answer for dropdowns)

LIVE DEMO for all 3: Radio buttons,Checkboxes and Dropdowns.

Custom Checkbox

h2 {
  font-weight: bold;
  margin: 20px 0 5px;
}

li {
  margin: 0.5em 0;
}


/*#region checkbox */

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]~label {
  display: inline;
  font-size: 18px;
}

input[type="checkbox"]~label:before {
  content: '';
  border-radius: 0.2em;
  border: 1px solid #333;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 32px;
  height: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

input[type="checkbox"]:checked~label:before {
  content: '✓';
}

<h2>Custom Checkbox</h2>
<div>
  <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
  <label for="RememberMe">Remember me</label>
</div>

Custom Radio Button

input[type="radio"] {
  display: none;
}

input[type="radio"]+label {
  display: inline;
  font-size: 18px;
}

input[type="radio"]+label:before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1px solid #222;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5em;
}

input[type="radio"]:checked+label:before {
  content: '';
  box-shadow: inset 0 0 0 0.6em white, inset 0 0 0 1em #333;
}

h2 {
  font-weight: bold;
  margin: 20px 0 5px;
}

ul {
  list-style: none;
}

li {
  margin: 0.5em 0;
}

<h2>Custom Radio Button</h2>
<ul>
  <li>
    <input type="radio" id="radio1" name="radios" checked />
    <label for="radio1">Apples</label>
  </li>
  <li>
    <input type="radio" id="radio2" name="radios" />
    <label for="radio2">Pineapples </label>
  </li>
</ul>

Custom Dropdown

select {
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */

select::-ms-expand {
  display: none;
  /* Remove default arrow in Internet Explorer 10 and 11 */
}


/* Target Internet Explorer 9 to undo the custom arrow */

@media screen and (min-width:0\0) {
  select {
    background: none\9;
    padding: 5px\9;
  }
}

<h2>Custom Dropdown</h2>

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Answer 4

This guy pretty much has all the styling you can put on form controls, but it's not consistent across browsers. You are going to have to go custom. Use a custom image for the checkbox, then change it's source to get the clicked version (and vice versa). The select menu might be a little trickier. I hope there's a jQuery plugin out there that can help you!