Checkbox e Radio

Caixas de seleção e Botões de opção
Estilizados só com CSS

Checkbox

<input id="ckb_1" class="ckb" type="checkbox" name="mark[]" value="1">
<label for="ckb_1"><span>Checkbox - 1</span></label>

<input id="ckb_2" class="ckb" type="checkbox" name="mark[]" value="2">
<label for="ckb_2"><span>Checkbox - 2</span></label>

...

Radio

<input id="rad_1" class="rad" type="radio" name="choice" value="1">
<label for="rad_1"><span>Radio - 1</span></label>

<input id="rad_2" class="rad" type="radio" name="choice" value="2">
<label for="rad_2"><span>Radio - 2</span></label>

...

Pode também ser usado dentro de um elemento com as classe ckb e rad

<div class="ckb">
    <input id="marcar_1" type="checkbox" name="mark[]" value="1">
    <label for="marcar_1"><span>Checkbox - 1</span></label>

    <input id="marcar_2" type="checkbox" name="mark[]" value="2">
    <label for="marcar_2"><span>Checkbox - 2</span></label>
</div>

<div class="rad">
    <input id="escolha_1" type="radio" name="choice" value="1">
    <label for="escolha_1"><span>Radio - 1</span></label>

    <input id="escolha_2" type="radio" name="choice" value="2">
    <label for="escolha_2"><span>Radio - 2</span></label>
</div>

Já preparados para ser usados em listas.

<ol class="ckb">
    <li>
        <input id="ckb_1" type="checkbox" name="list[]" value="1">
        <label for="ckb_1"><span>Checkbox - 1</span></label>
    </li>
    <li>
        <input id="ckb_2" type="checkbox" name="list[]" value="2">
        <label for="ckb_2"><span>Checkbox - 2</span></label>
    </li>
</ol>

<ul class="rad">
    <li>
        <input id="rad_1" type="radio" name="list[]" value="1">
        <label for="rad_1"><span>Checkbox - 1</span></label>
    </li>
    <li>
        <input id="rad_2" type="radio" name="list[]" value="2">
        <label for="rad_2"><span>Checkbox - 2</span></label>
    </li>
</ul>

O elemento label tem que estar colocado após o elemento input

/** checkbox */
.ckb input, input.ckb {
    display: none;
}
.ckb input + label, input.ckb + label {
    position: relative;
    display: block;
    top: 4px;
    margin-bottom: 6px;
    width: 19px;
    height: 19px;
    /* border: 1px solid rgba(255, 255, 255, 0.10); */ /* : opcao com bordas */
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.40) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.30) inset;
    cursor: pointer;
    border-radius: 2px;
}
.ckb input + label::before, input.ckb + label::before {
    position: absolute;
    display: block;
    top: -1px;
    left: 3px;
    bottom: 0;
}
.ckb input:checked + label::before, input.ckb:checked + label::before {
    content: '\2714';
    font-size: 16px;
    font-weight: bold;
    color: green;
}
.ckb input + label span, input.ckb + label span {
    position: relative;
    display: inline-block;
    top: -2px;
    padding-left: 26px;
    width: auto;
    color: var(--color);
    font-size: 1rem;
    white-space: pre;
    cursor: pointer;
}

/** radio */
.rad input, input.rad {
    display: none;
}
.rad input + label, input.rad + label {
    position: relative;
    display: block;
    cursor: pointer;
    margin-bottom: 6px;
    width: 19px;
    height: 19px;
    border-radius: 100%;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.40) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.30) inset;
    transition: .3s;
}
.rad input:checked + label, input.rad:checked + label {
    background-image: radial-gradient(circle at center, 
        #40bf80, #39ac73, #339966, #2d8659, #26734d, #206040, #194d33
    );
    transition: .3s;
}
.rad input + label span, input.rad + label span {
    position: relative;
    display: inline-block;
    top: -1.5px;
    padding-left: 27px;
    cursor: pointer;
    width: auto;
    white-space: pre;
    font-size: 1rem;
}

/** listas para "radio" e "checkbox" */
ul.ckb, ol.ckb,
ul.rad, ol.rad {
    margin: 0 0;
    padding: 0 0;
    list-style: none;
}
ul.ckb li, ol.ckb li,
ul.rad li, ol.rad li {
    line-height: initial;
}