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.

Basra

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

Reorganization

most of the links on that page are broken – Machutte

You don't need any library for the same. You can do it on your own with pure CSS, and just a line of javascript/jquery. You don't need any libraries for these. You can put li'l logic and you can roll on your own. A line of javascript/jquery, and everything CSS. Guide here- github.com/scazzy/CSS-FORM-UI – Gollin

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.

Ona

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>

Politico

Answer 4

I believe CSS 3 will allow you to style those elements, but for now it isn't directly possible.

See this question: CSS checkbox input styling

Hooked

Answer 5

You can style form elements, but it is difficult (impossible?) to get a consistent style across browsers and operating systems with a pure CSS approach. Some script manipulation of styles would also be required.

This is a very good article that discusses the options and issues: Styling form controls

Listamatic has a great collection of CSS list styles.

Bashful

Answer 6

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!

Klayman

Answer 7

You can't put an image as a checkbox, but you can always build your own checkbox :D.

Put a hidden field and an image, add an "onclick" event over the image. When the onclick is fired check the status of the hidden field, change the image according to the status and save the status of the checkbox in your hidden field.

You should check for custom javascript libraries. One of my favorities is http://www.dojotoolkit.org/

Boanerges

Answer 8

Most likely you won't be able to, it is very difficult. Personally, I would just stay away from that.

Sermonize

Answer 9

You might find my post useful: http://kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/.

The basic idea is to hide the form ele­ment (checkbox/radio but­ton) and style the label instead using CSS. Thanks to the :checked selec­tor, it’s pos­si­ble to dis­tin­guish between the two label states by assign­ing styles to label and input:checked + label assum­ing that the label fol­lows the checkbox/radio but­ton in your html code. Using a for attribute in the code makes the com­plete label click-able, mod­i­fy­ing the state of the asso­ci­ated element.

Chantress

Answer 10

Recently i come across amazing WTF, forms? from a creator of Bootstrap Mark otto. It has great styles for

• Checkbox
• Radio button
• Select
• Progress bar
• File Browser

Checkout http://wtfforms.com/

Punish

Answer 11

You don't need any library for the same. You can do it on your own with pure CSS, and just a line of javascript/jquery.

You don't need any libraries for these. You can put li'l logic and you can roll on your own. A line of javascript/jquery, and everything CSS.

Guide here- https://github.com/scazzy/CSS-FORM-UI

Gollin