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

body {
  margin: 1em;
}
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: 'âś“';
}
/*#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;
    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;
}
/*#endregion */


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

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;
    }
}