CUSTOM INPUTS

by danield770

HTML

<h2>Custom Checkbox</h2>
<div>
    <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
    <label for="RememberMe">Remember me</label>
</div>
<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>
<h2>Custom Dropdown</h2>
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->

CSS

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

/*#region checkbox */
input[type="checkbox"] {
    display:none;
}

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

input[type="checkbox"] ~ label:before {
    content: '';
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/unchecked.png) no-repeat;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 3px; /*rtl*/
}

input[type="checkbox"]:checked ~ label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/checked.png) no-repeat;
}
/*#endregion */

/*#region 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;
    background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"]:checked + label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
/*#endregion */


/*#region dropdown */
label {
    position: relative;
    display: inline-block;
}

select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}

/* Select arrow styling */
.notIE label:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 4px;
    right: 4px;
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
    pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    .notIE label:after
    {
        display:none;
    }
}
/*#endregion */