JSFiddle - React, Tailwind, and code Playground
HTML
<div class="radio-client">
<div>
<input type="radio" class="btn-radio" name="client" value="Oui" id="oui-client" checked="checked"/><label for="oui-client"></label><p>Je suis déjà client KONE</p>
</div>
</div>
<div class="radio-client">
<div>
<input type="radio" class="btn-radio" name="client" value="Non" id="non-client"/><label for="non-client"></label><p>Je ne suis pas encore client KONE</p>
</div>
</div>
CSS
.radio-client{
position: relative;
width: 262px;
}
.contentFormulaire .radio-client div{
width:70px;
}
.contentFormulaire .radio-client p{
color: #ffffff;
margin-left:30px;
font-size:0.875em;
font-weight:lighter;
width:230px;
margin-bottom:15px;
}
.btn-radio{
display:none;
}
[type="radio"] + label {
background: none repeat scroll 0 0 #ffffff;
border-radius: 2px;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 0px;
width: 16px;
cursor:pointer;
}
[type="radio"]:checked + label:after {
content: url(http://zupimages.net/up/16/30/5k9m.png);
position: absolute;
top: -0px; left: 1px;
font-size: 14px;
color: #99a1a7;
transition: all .2s;
}
[type="radio"]:checked + label {
background: none repeat scroll 0 0 #ffffff;
border-radius: 2px;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 0px;
width: 16px;
}
[type="radio"] + label:active, .btn-radio:checked + label:active {
box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.5) inset;
transition: all .2s;
}
JavaScript
$(function(){
$("#form").submit(function(event){
var client = $("input[name='client']:checked").val();
$.ajax({
type : "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success : function(){
show_message;
alert.html("Message envoyé !");
},
error: function(){
show_message;
alert.html("Erreur lors de l'envoi !");
}
});
}