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 dropdo

Answer 1

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

Answer 2

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 3

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 4

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 5

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.