<body>
<main class="website">
<h1>L'interMEDIAire</h1>
<form action="#">
<div class="input">
<div class="choice">
<input id="checkboxe" checked name="checkboxe" type="checkbox">
<label for="checkboxe">Label</label>
</div>
</div>
<div class="input">
<div class="choice">
<input id="checkboxe-2" name="checkboxe-2" type="checkbox">
<label for="checkboxe-2">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.
</label>
</div>
</div>
<div class="input">
<div class="choice choice--radio">
<input id="radio" name="radio" type="radio">
<label for="radio">radio example</label>
<br>
<br>
<input id="radio-2" name="radio" type="radio">
<label for="radio-2">radio example</label>
</div>
</div>
<div class="input">
<div class="choice choice--cf7">
<p>
<span class="wpcf7-form-control-wrap" data-name="Conditions">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
<span class="wpcf7-list-item first last">
<input type="checkbox" name="Conditions[]" value="Oui, j'accèpte les conditions d'utilisations*">
<span class="wpcf7-list-item-label">Test checkboxe contact form 7</span>
</span>
</span>
</span>
</p>
</div>
</div>
</form>
</main>
</body>$noir: rgba(0,0,0,1);
$noirfonce: rgba(29,31,32,1);
$rose: rgba(152,38,114,1);
$bleu: rgba(128,155,189,1);
$blanc: rgba(255,255,255,1);
*,
*::after,
*::before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 24px auto;
background: $noirfonce;
max-width: 640px;
}
h1 {
margin: 12px;
color: $bleu;
font-size: 1.6em;
font-family: sans-serif;
text-transform: uppercase;
}
.website {
padding: 24px;
background: $noir;
}
.input {
margin: 24px auto 0px;
padding: 0 12px;
max-width: 768px;
}
/* START */
@mixin checkboxe($taille: 24px, $color_primary: grey, $color_secondary: #dedede, $color_thirdy: red, $color_four: pink, $borderWidth: 3px) {
input {
position: relative;
margin: 0;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
display: inline-block;
margin-right: 8px;
width: $taille;
height: $taille;
background: $color_secondary;
vertical-align: middle;
border: $borderWidth solid $color_primary;
}
input + label {
color: $color_primary;
font-size: $taille;
line-height: calc(#{$taille} * 1.2);
vertical-align: middle;
cursor: pointer;
}
input::before {
content: "";
display: inline-block;
margin: calc(#{$taille} / 4) 0px 0 calc(#{$taille} / 4);
width: calc(#{$taille} / 2);
height: calc(#{$taille} / 4);
border: 0px solid $color_thirdy;
border-bottom-width: $borderWidth;
border-left-width: $borderWidth;
transform: rotate(-45deg);
transform-origin: center center;
opacity: 0;
transition: all .3s ease;
}
input:checked {
background: $color_four;
border: $borderWidth solid $color_thirdy;
}
input:checked + label {
color: $color_thirdy;
}
input:checked::before {
opacity: 1;
}
}
.choice {
@include checkboxe(24px, $bleu, $noirfonce, $rose,$noirfonce, 2px);
&--radio {
$tailleBtnRadio: 24px;
$bgRadio: $rose;
@include checkboxe($tailleBtnRadio, $bleu, $noir, $bgRadio, $noir, 1px);
input {
border-radius: 50%;
}
input::before {
margin: calc(50% - calc(#{$tailleBtnRadio} / 4));
width: calc(#{$tailleBtnRadio} / 2);
height: calc(#{$tailleBtnRadio} / 2);
background: $bgRadio;
border-radius: 50%;
border: none;
transform: none;
}
}
}
.wpcf7-list-item-label {
@extend label;
}$(document).ready(function() {
$('.wpcf7-list-item-label').on('click', function(e) {
$(this).prev().trigger('click')
})
});
External CSS
This Pen doesn't use any external CSS resources.