Form Selectors. More info: http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/

form-selectors.css

input[type="text"] {
    /* */
}
input[type="submit"]{
    /* */
}

input[type=button]{
  /* */
}

input:enabled{
 	/* Selects every enabled <input> element */	
}

input:disabled{ 	
	/* Selects every disabled <input> element */ 	
}

input:checked{
 	/* Selects every checked <input> element */	
 }
 
 input[type=checkbox]{

}

input[type=radio]{
  
}

/* Trident provides the ::-ms-check pseudo-element for checkbox and radio button controls. For example: */
 
 ::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

input[type=date]{
  
}

/*
    ::-webkit-datetime-edit
    ::-webkit-datetime-edit-fields-wrapper
    ::-webkit-datetime-edit-text
    ::-webkit-datetime-edit-month-field
    ::-webkit-datetime-edit-day-field
    ::-webkit-datetime-edit-year-field
    ::-webkit-inner-spin-button
    ::-webkit-calendar-picker-indicator

*/

input[file]{
  
}

/*
As of IE10 the file input button can be styled using the ::-ms-browse pseudo-element. Basically any CSS rules that you apply a regular button can be applied to the pseudo-element.
WebKit provides a hook for its file input button with the ::-webkit-file-upload-button pseudo-element. Again pretty much any CSS rule can be applied.
*/

input[type=number]{
  
}

/*
WebKit provides a spinner control by default for number picker inputs. Pseudo-elements ::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button and ::-webkit-outer-spin-button are provided for customization. While you cannot do a whole lot with these elements, it can be useful to hide the spinner.
*/

input[type=password]{
  
}

/*
Trident provides a control on password inputs that can be pressed to display the password in plain text. This control is made customizable via the ::-ms-reveal pseudo-element. You can change a number of properties of the control including its color, background, or display to hide it.
*/

/*
<input placeholder="placeholder">

Gecko provides the pseduo-element ::-moz-placeholder to style placeholder text. You can use this to change the placeholder’s color or font properties.
Note: Gecko switched from the pseudo-class :-moz-placeholder to the pseudo-element ::-moz-placeholder in Firefox 19.
Trident offers the ability to style the placeholder text with a pseudo-class rather than a pseudo-element. However the pseudo-class, :-ms-input-placeholder, can be used the same as the pseudo-elements from the other rendering engines.
WebKit provides the ::-webkit-input-placeholder pseudo-element. It can also be used to change the color and font of the placeholder text.
*/

input[type=range]{
  
}

/*
As of Firefox 22, Gecko provides pseudo-elements ::-moz-range-track and ::-moz-range-thumb for styling range inputs. It’s possible to apply most CSS rules to these elements.

Trident provides an impressive number of pseudo-elements to customize its range selector.
    ::-ms-fill-lower: The track portion underneath / before the handle.
    ::-ms-fill-upper: The track portion above / after the handle.
    ::-ms-ticks-before: An area above / before the range track with tick marks.
    ::-ms-ticks-after: An area below / after the range track with tick marks.
    ::-ms-thumb: The handle.
    ::-ms-track: The range track itself.
    ::ms-tooltip: The tooltip that appears when the user is selecting a value with the range selector. Note that this element cannot be styled, only hidden using display: none.

WebKit provides the ::-webkit-slider-runnable-track pseudo-element for the track and ::-webkit-slider-thumb for the range handle itself. While you cannot do much with these elements, you can add some colors and padding.

One final note about range inputs. Trident and Webkit allow you to apply hover states to the thumb pseudo-element (::-webkit-slider-thumb:hover and ::-ms-thumb:hover respectively), whereas Gecko currently does not.


UPDATE:

http://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

input[type=range] {
  -webkit-appearance: none; // Hides the slider so that custom slider can be made 
  width: 100%; // Specific width is required for Firefox. 
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; // Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though.
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; // Hides the slider so custom styles can be added 
  border-color: transparent;
  color: transparent;
}


This gives us invisible or unstyled range inputs in all browsers. Now we can apply our custom styles.


Styling the thumb:

input[type=range]::-webkit-slider-thumb {}

input[type=range]::-moz-range-thumb {}

input[type=range]::-ms-thumb {}


Styling the track:

input[type=range]::-webkit-slider-runnable-track {}

input[type=range]:focus::-webkit-slider-runnable-track {}

input[type=range]::-moz-range-track {}

input[type=range]::-ms-track {}

input[type=range]::-ms-fill-lower {}

input[type=range]:focus::-ms-fill-lower {}

input[type=range]::-ms-fill-upper {}

input[type=range]:focus::-ms-fill-upper {}


*/


input[type=search]{
  
}


By default WebKit provides a custom UI for search inputs with cancel and search buttons. Two pseudo-elements, ::-webkit-search-cancel-button and ::-webkit-search-results-button are provided for customization, although you can’t much of anything with them other than hide them


input[type=text]{
  
}

/*
As of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs (input[type=text], input[type=password], etc) and <select>s.
In IE10 when a text input has focus and is not empty, a small X control appears in the right hand side of the input. When clicked, the control will clear the contents of the text input. The X is styleable with the ::-ms-clear pseudo-element. Therefore you can hide it
*/


/*
<button>

Gecko applies pseudo-elements ::-moz-focus-outer and ::-moz-focus-inner to inputs of type button, reset, and submit, as well as <button> elements.

There’s not much you can do with these pseudo-elements, but there is one important thing to be aware of. Gecko applies padding and border to ::-moz-focus-inner by default

*/

/*
<meter>

WebKit provides pseudo-elements ::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value to customize the display of meter elements.

In order for the pseudo-elements to be styled, you must set -webkit-appearance to none on the meter element itself.

Only one of the ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value elements will be active at a given time depending on the value of the meter.

*/


/*

<progress>

WebKit provides pseudo-elements ::-webkit-progress-inner-element, ::-webkit-progress-bar, & ::-webkit-progress-value to style progress elements in the following hierarchy:
Like meter, in order to apply any rules to these elements you must set -webkit-appearance: none; on the progress element.
Gecko provides a ::-moz-progress-bar pseudo-element to style the progress bar itself. 
Like Gecko, Trident provides a single pseudo-element to style the progress bar, ::-ms-fill.
*/

/*
<select>

As of IE10 Trident gives you a hook to style the arrow within select dropdowns, ::-ms-expand.
*/

/*
<textarea>

WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements.

It can be hidden by applying display: none or -webkit-appearance: none

Note: Adding display: none to ::-webkit-resizer doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resize CSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.

The ::-webkit-resizer pseudo-element also allows for some basic styling
*/


/*

Form Validation Messages

WebKit is the only rendering engine to support styling the validation bubbles created from the constraint validation API. The following pseudo-elements are provided:

    ::-webkit-validation-bubble
    ::-webkit-validation-bubble-arrow
    ::-webkit-validation-bubble-arrow-clipper
    ::-webkit-validation-bubble-heading
    ::-webkit-validation-bubble-message
    ::-webkit-validation-bubble-text-block


*/