baz_april/squelettes/scss/components/_custom-radios.scss

/*

Markup à utiliser :

	<div>
	  <input id="option" type="checkbox" name="field" value="option">
	  <label for="option"><span><span></span></span>Label du champ</label>
	</div>

Par exemple, avec jQuery :

	$('.formulaire_spip .choix label').each(function(){
		$(this).prepend('<span><span></span></span>').parent().addClass('custom-radios');
	});

*/

$radio-width: 20px;
$check-color: $couleur-lien;

.custom-radios {
    input[type=checkbox]:not(old),
    input[type=radio   ]:not(old) {
        width:     1em;
        margin:    0;
        padding:   0;
        font-size: 1em;
        opacity:   0;
    }
    input[type=checkbox]:not(old) + label:not('.crayon'),
    input[type=radio   ]:not(old) + label {
        display:     flex;
        align-items: start;
        margin-left: -1.5em;
    }
    input[type=checkbox]:not(old) + label > span,
    input[type=radio   ]:not(old) + label > span {
        position:       relative;
        flex-shrink:    0;
        display:        inline-block;
        width:          $radio-width;
        height:         $radio-width;
        margin-right:   0.5em;
        border:         thin solid rgb(192, 192, 192);
        border-radius:  0.25em;
        background:     rgb(224, 224, 224);
        background:     linear-gradient(rgb(240, 240, 240), rgb(224, 224, 224));
        vertical-align: middle;
    }
    input[type=checkbox]:not(old) + label > span:before {
        content:       ' ';
        border-radius: 0.25em;
    }
    input[type=radio]:not(old) + label > span,
    input[type=radio]:not(old) + label > span > span {
        border-radius: 50%;
    }
    input[type=checkbox]:not(old):checked + label > span:before,
    input[type=radio]:not(old):checked + label > span > span {
    }
    input[type=checkbox]:not(old):checked + label > span:before {
        position:    absolute;
        display:     block;
        top:         50%;
        left:        50%;
        transform:   translateY(-60%) translateX(-50%);
        content:     '\2714';
        color:       $check-color;
        font-size:   150%;
        line-height: 1;
        font-weight: bold;
    }
    input[type=radio]:not(old):checked + label > span > span {
        position:      absolute;
        display:       block;
        width:         $radio-width / 2;
        height:        $radio-width / 2;
        top:           50%;
        left:          50%;
        transform:     translateY(-50%) translateX(-50%);
        background:    $check-color;
        background:    linear-gradient($check-color, darken($check-color, 20%));
        border-radius: 50%;
    }
}