personnaliser checkbox et bouton radio
nous allons voir comment
personnaliser les bouton radio et les checkbox
voici les images qu'il vous faut
nous allons commencé par les checkbox
d'abord
mettre ça dans la head
<script
src="http://bormat2.free.fr/script/jsapi"
type="text/javascript"></script>
<script type="text/javascript"
charset="utf-8">//<![CDATA[
google.load("jquery", "1.3");//]]></script>
<script
src="http://bormat2.free.fr/script/prettycheckboxes.js"
type="text/javascript"
charset="utf-8"></script>
<STYLE
type="text/css">
<!--
label.checkbox span.holder { background: transparent
url('http://bormat2.free.fr/image/checkbox.gif')
repeat scroll 0% 0%;
-moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous; height: 61px; }
label.radio span.holder { background: transparent
url('http://bormat2.free.fr/image/radio.gif')
repeat scroll 0% 0%;
-moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous; height: 61px; }
label.checked span.holder, label.checked span.holder,
label.checked:hover span.holder, label.checked:hover span.holder { top:
-42px ! important; }
input.hiddenCheckbox { left: -999px; position: absolute; }
label.prettyCheckbox span.holderWrap { overflow: hidden; float: left;
position: relative; }
label.prettyCheckbox span.holder { display: block; position: absolute; }
label.checked span.holder, label.checked span.holder,
label.checked:hover span.holder, label.checked:hover span.holder { top:
-42px ! important; }
label.checkbox:hover span.holder, label.radio:hover span.holder { top:
-21px ! important; }
label.checked span.holder, label.checked span.holder,
label.checked:hover span.holder, label.checked:hover span.holder { top:
-42px ! important; }
-->
</STYLE><script
type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function(){
$('#checkboxDemo input[type=checkbox],#radioDemo
input[type=radio]').prettyCheckboxes();
$('.inlineRadios
input[type=radio]').prettyCheckboxes({'display':'inline'});
code.init();
});
//]]></script>
remplacer ce qui est en rouge par l'adresse de vos images
puis on met ça dans le body pour les checkbox
<form id="checkboxDemo"
action="http://bormat2.free.fr/personnalisation_formulaire/"
name="checkboxDemo"><label for="checkbox-1">Item
1</label> <input checked="checked" id="checkbox-1"
value="checkbox-1" type="checkbox" /><br />
<label
for="checkbox-2">Item 2</label><input
checked="checked"
id="checkbox-2" value="checkbox-2" type="checkbox" /><br
/>
<label
for="checkbox-3">Check all</label><input
checked="checked"
id="checkbox-3" value="checkbox-3"
onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'))"
type="checkbox" /></form>
et ça dans pour les radio
<form class="inlineRadios"
action="http://www.no-margin-for-errors.com/projects/prettyCheckboxes/"><label
for="radio-5">Item 1</label>
<input name="radio-button-inline" id="radio-5"
value="radio-1" type="radio"><br>
<label for="radio-6">Item 2</label>
<input checked="checked" name="radio-button-inline"
id="radio-6" value="radio-2"
type="radio"><br><label
for="radio-7">Item 3</label>
<input name="radio-button-inline" id="radio-7"
value="radio-3" type="radio"><br>
<label for="radio-8">Item 4</label>
<input name="radio-button-inline" id="radio-8"
value="radio-4" type="radio"> </form>
et voilà ce que ça donne