Styling html select and checkbox

Question

Here is the fiddle. I am trying to style the <select> and <input id='checkbox'> using CSS. I am currently using select {background: #4a4a4a} and it works, but I cannot get any other styles to work. The checkbox style doesn't work at all when using input[type='checkbox'] {background: #4a4a4a}

HTML:

<select>
    <option>Hello</option>
    <option>Hola</option>
    <option>Bonjour</option>
</select>
<input type='checkbox'>

CSS:

body {
    background: #252525;
}
select {
    background: #4a4a4a;
    border-radius: 0px;
}
input[type='checkbox'] {
    background: #4a4a4a;
    border-radius: 0px;
}

JS:

none

Edit

I have started a project where I am making my own not styleable form elements. For more info see this question.

Answer 1

Styling checkboxes

Styling checkboxes is tricky and inconsistent across browsers. Here is pure CSS approach. It takes advantage of that when label and input are connected with an id= , clicking on the label activates the input box itself. No JavaScript needed there.

HTML

<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text 
   <span class="checkbox"></span>
</label>

CSS Hide checkbox, style the <span> as you like. I've used a CSS sprite here.

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label .checkbox {
  display: inline-block;
  width: 22px;
  height: 19px;
  vertical-align: middle;
  background: url('ui-sprite.png') left -90px no-repeat;
  cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
  background: url('ui-sprite.png') -30px -90px no-repeat;
}

Styling select inputs

I haven't found a simple working solution for this yet. Here is an article about a hack that seems to be on a good way.

Answer 2

Given how every browser has its own rules and exceptions when it comes to input element styling, I tend to use things like http://uniformjs.com/ for consistent input styling. Slows things down on pages with thousands of input elements, but otherwise quite excellent.

Answer 3

You cannot style all form elements. Browsers tend to not allow you to style check-boxes and select boxes (As well as drop downs, radios, file uploads etc...). The general concept I have used before is to hide the actual element and use a replacement element such as a div to display to the user. That div can be styled to look and work the way you want. The tricky part and part most often missed is you have to actually change the state of the hidden form element when the user interacts with the mock element.

This is a JQuery Plugin that will provide the above functionality. This plugin was written with the intent that the user would style the elements according to what they need. Here is an example JsFiddle that demonstrates the plugin and exposes the CSS selectors with some basic styling. Basic code below...

HTML

<form>
  <select>
    <option>Hello</option>
    <option>Hola</option>
    <option>Bonjour</option>
  </select>
  <br/>
  <input type='checkbox'>
</form>

JQuery

$(document).ready(function () {
    $('body').styleMyForms();
});

CSS

 body {
     background: #252525;
 }
 .sf {
     position: relative;
     display: block;
     float: left;
 }
.sf-checkbox {
     top: 6px;
     margin-right: 5px;
     height: 15px;
     width: 15px;
     background: #fff;
     border: 1px solid #444;
     cursor: pointer;
     background: #4a4a4a;
     border-radius: 0px;
}
.sf-select {
     display: block;
     width: 220px;
     border: 1px solid #222;
     background: #4a4a4a;
     border-radius: 0px;
     padding: 0px 10px;
     text-decoration: none;
     color: #333;
     margin-bottom: 10px;
 }
.sf-select-wrap {
    position: relative;
    clear: both;
}
.sf-select-ul {
    background: #fff;
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    border: 1px solid #888;
    width: 240px;
    padding: 0px;
    top: 33px;
}
.sf-select-ul li {
     position: relative;
     cursor: pointer;
     padding: 0px 10px;
     color: #333;
 }
.sf-select-ul li:hover {
     background: #efefef;
 }
 .sf-select-ul li.selected {
    background: #508196;
    color: #fff;
 }
 .sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
     border-color: #222;
 }
 .sf-select:hover {
 }
 .sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus,      .sf-select:focus {
     background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
    background: #9cb7c3;
}
.clear {
    clear: both;
}
.buttonish {
    display: block;
    font-family:'Francois One', sans-serif;
    font-weight: normal;
    font-size: 2.8em;
    color: #fff;
    background: #9cb7c3;
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    width: 480px;
    text-align: center;
    margin-top: 50px;
    text-shadow: 2px 2px 4px #508196;
    box-shadow: 2px 2px 4px #222;
}

Answer 4

Think in boxes, how many boxes does a populated select seem to have when you look at it in a browser...

a lot , and they have lots of associated styles/scripts (background/colors,paddings, the functionality open/close etc.)

And actually you don't see anything of that in your code

So the code can only come from the browser

and browsers are different , all answers are correct, don't try to style it, let a JavaScript replace the elements and functionality.