ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// Magento 2 core forms sexy inputs type=radio and type=checkbox // !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!! // <div class="field choice"> // <input type="checkbox" id="is_subscribed" class="checkbox" /> // <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label> // </div> .field.choice { @custom-field_choice---width: 20px; position: relative; input[type="radio"], input[type="checkbox"] { position: absolute; left: -99999em; + .label { &:before { content: ""; display: inline-block; vertical-align: bottom; margin-right: 8px; width: @custom-field_choice---width; height: @custom-field_choice---width; border: 1px solid @color_green; cursor: pointer; background: #fff; // Fine tuning vertical-align if needed //position: relative; //top: 2px; } } &:checked { + .label { &:before { background: @color_green; } } } } input[type="radio"] { + .label { &:before { border-radius: @custom-field_choice---width; } } } input[type="checkbox"] { + .label { &:before { border-radius: @custom-field_choice---width/10; } } } } |