<div>
    <input type="checkbox"/>
    <label>Coyier made me do it</label>

    <section>
        <div class="selection">
            <input type="radio" name="hellomoto" />
            <label>Choose Me</label>
        </div>
        <div class="selection">
            <input type="radio" name="hellomoto" />
            <label>No Choose Me</label>
        </div>
        <div class="selection">
            <input type="radio" name="hellomoto" />
            <label>What About Me</label>
        </div>
    </section>
</div>
div { position: relative;}

input[type="checkbox"], input[type="radio"] {
    position: absolute;
    z-index: 999; /*so you can click on the :after */
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    min-height: 2em; 
    opacity: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

section {
   margin-top: -2px;
   height: 0;
   overflow: hidden;
   max-height: 0;
   -webkit-transition: 1s all;
}

label:after {
    content: '▾';
    position: absolute;
    right: .5em;
    top: 0;
}

input[type="checkbox"]:active + label,
input[type="radio"]:active + label{
  background: #ccc; 
}

input[type="checkbox"]:checked ~ section {
    height: auto;
    max-height: 12em;
}

input[type="checkbox"]:checked + label:after {
    content: '×';
}

.selection {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%
}


input[type="radio"]:checked + label {
    background: #333;
    color: white;
}

input[type="radio"]:checked + label:after {
    position: absolute;
    right: .5em;
    top: .25em;
    content: '✓';
}


/* Non-Important Styling. Mooooove, get out the way */
div {
    width: 50%;
    max-width: 350px;
    margin: 1em auto;
    font-family: helvetica neue;
    font-weight: 300;
    font-size: 18px;
}
label {
    display: block;
    background: #eee;
    color: #333;
    text-align: left;
  font-size: 1.25em;
    line-height: 2em;
    padding: 0 .5em;
    border-radius: 5px;
}
label:after { font-size: 1.25em }
section {
   background: #eee;
   color: #333;
  border-radius: 0 0 5px 5px;
}
section:after {
    color: #666;
    font-size: 1.75em;
}
.selection label:after { content: ''; }
.selection label {
    display: block;
    font-size: .875em;
    line-height: 2em;
    padding: .25em .5em;
    margin: 0;
    text-align: left;
    background: #eee;
    border-radius: 0;
}
.selection:last-child label {
  border-radius: 0 0 5px 5px;
}
// checkbox abomination by @jesse_frye

// i tried to style a select box and cried once
// when the tears dried this is the code that came to me in a vision 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.