JSFiddle - React, Tailwind, and code Playground

HTML

<form action="traitement.php">
	<input type="checkbox" id="conditions" />
	<span class="fakeCheckBox" data-id="conditions" ></span>
	<label for="conditions">J'accepte les <a href="http://www.google.fr">conditions d'utilisation</a> du service</label>
</form>

CSS

form {position:relative;}
[type=checkbox] {opacity:0;}
.fakeCheckBox {position:absolute;width:10px;height:10px;top:3px;left:4px;border:2px inset;background:#fff;z-index:-1;}
.fakeCheckBox:before {content:"";position:absolute;width:0;height:0;transform:rotate(-45deg);transition:height .2s ease, width .3s .1s ease;}
.checked:before {width:10px;height:5px;border:2px solid;border-top:none;border-right:none;}

JavaScript

var trueCheckBox = document.querySelectorAll("[type=checkbox]"),
	i = 0,
	l = trueCheckBox.length;

function doCheck(e){
	var that = e.target || e.srcElement,
		targetFake = document.querySelector("[data-id="+ that.id + "]");
	
	targetFake.className = that.checked ? targetFake.className + " checked" : targetFake.className.replace(" checked", "");
}

for ( ; i<l; i++) trueCheckBox[i].addEventListener("change", doCheck, false);