From scratch (pas de markup imposé)
Simulation : http://jsfiddle.net/frontenddeveloper/3w5gvhyL/.
|
1 2 |
.delivery-mode input[type="radio"]{ position: absolute; left: -9999em; } .delivery-mode input[type="radio"]:checked + label i { color: red; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form> <ul class="delivery-mode"> <li> <input id="retrait_magasin" type="radio" name="delivery_mode" value="retrait_magasin" /> <label for="retrait_magasin"><i>[radio]</i> Retrait en magasin</label> </li> <li> <input id="domicile_colissimo" type="radio" name="delivery_mode" value="domicile_colissimo" /> <label for="domicile_colissimo"><i>[radio]</i> A domicile - Colissimo</label> </li> </ul> </form> |
Ressource externe (Accessible) : https://github.com/stevenMouret/css-custom-radio-checkbox.
Markup formulaires Drupal 7
Valable également si le module Webform est utilisé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="form-item webform-component webform-component-radios webform-component--new-1501229867570"> <label for="edit-submitted-new-1501229867570">Nouveau champ "boutons radio" </label> <div id="edit-submitted-new-1501229867570" class="form-radios"><div class="form-item form-type-radio form-item-submitted-new-1501229867570"> <input type="radio" id="edit-submitted-new-1501229867570-1" name="submitted[new_1501229867570]" value="1" class="form-radio"> <label class="option" for="edit-submitted-new-1501229867570-1">un </label> </div> <div class="form-item form-type-radio form-item-submitted-new-1501229867570"> <input type="radio" id="edit-submitted-new-1501229867570-2" name="submitted[new_1501229867570]" value="2" class="form-radio"> <label class="option" for="edit-submitted-new-1501229867570-2">deux </label> </div> <div class="form-item form-type-radio form-item-submitted-new-1501229867570"> <input type="radio" id="edit-submitted-new-1501229867570-3" name="submitted[new_1501229867570]" value="3" class="form-radio"> <label class="option" for="edit-submitted-new-1501229867570-3">trois </label> </div> </div> </div> <div class="form-item webform-component webform-component-checkboxes webform-component--new-1501229869002"> <label for="edit-submitted-new-1501229869002">Nouveau champ "cases à cocher" </label> <div id="edit-submitted-new-1501229869002" class="form-checkboxes"><div class="form-item form-type-checkbox form-item-submitted-new-1501229869002-1"> <input type="checkbox" id="edit-submitted-new-1501229869002-1" name="submitted[new_1501229869002][1]" value="1" class="form-checkbox"> <label class="option" for="edit-submitted-new-1501229869002-1">un </label> </div> <div class="form-item form-type-checkbox form-item-submitted-new-1501229869002-2"> <input type="checkbox" id="edit-submitted-new-1501229869002-2" name="submitted[new_1501229869002][2]" value="2" class="form-checkbox"> <label class="option" for="edit-submitted-new-1501229869002-2">deux </label> </div> <div class="form-item form-type-checkbox form-item-submitted-new-1501229869002-3"> <input type="checkbox" id="edit-submitted-new-1501229869002-3" name="submitted[new_1501229869002][3]" value="3" class="form-checkbox"> <label class="option" for="edit-submitted-new-1501229869002-3">trois </label> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@mixin sexy-form-booleans(){ [type="radio"], [type="checkbox"] { position: absolute; left: -99999rem; + label { &:before { display: inline-block; vertical-align: middle; content: ""; width: 20px; height: 20px; margin-right: 6px; border: 1px solid pink; } } &:checked { + label { &:before { background: pink; box-shadow: inset 0px 0px 0px 2px #fff; } } } } [type="radio"] { + label { &:before { border-radius: 50%; } } } } @include sexy-form-booleans(); |