Bonjour,
Sur une page web, j'utilise un formulaire défini comme ci-dessous.
Pour les bouton (OK et RESET), j'utilise des sprite CSS pour le background du bouton, le texte est par contre affiché normalement via l'attribut "value".
et le CSS:
Sous FF/Chrome/Safari tout est nickel, lorsqu'il y a l'action de cliquer, la directive CSS .bouton:active est appliquée.
par contre sous IE, elle n'est pas prise en compte.
Sur une page web, j'utilise un formulaire défini comme ci-dessous.
Pour les bouton (OK et RESET), j'utilise des sprite CSS pour le background du bouton, le texte est par contre affiché normalement via l'attribut "value".
<div id="filtre">
<form id="formfiltre" action="" onsubmit="return valider()" onreset="return Reset()" method="get">
<p>
<label class="formsiglelb" for="sigle">Sigle</label>
<input class="formsigle" type="text" name="sigle" value="" id="sigle" />
<label class="formvaleurlb" for="valeur">Valeur</label>
<input class="formvaleur" type="text" name="valeur" value="" id="valeur"/>
<input id="OKbouton" class="bouton" type="submit" value="OK" />
<input id="RESETbouton" class="bouton" type="reset" value="Reset" />
</p>
</form>
</div>
et le CSS:
.formsigle
{
border: 1px solid #888888;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
width: 40px;
font-size: 11px;
font-family: monospace;
vertical-align:middle;
height: 11px;
line-height: 11px;
}
.formvaleur
{
border: 1px solid #888888;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
width: 50px;
font-size: 11px;
font-family: monospace;
margin-right: 2px;
vertical-align:middle;
height: 11px;
line-height: 11px;
}
.formsiglelb
{
margin-left: 5px;
margin-right: 4px;
vertical-align:middle;
}
.formvaleurlb
{
margin-left: 5px;
margin-right: 4px;
vertical-align:middle;
}
.bouton
{
margin-left: 10px;
margin-right: 2px;
font-size: 11px;
width: 40px;
height:17px;
line-height: 17px;
border: none;
background: url(image/bouton.png) 0 0 no-repeat;
vertical-align:middle;
text-align: center;
padding: 0px;
cursor: pointer;
}
.bouton:hover
{
background-position:0 -17px;
cursor: pointer;
border: none;
}
.bouton:active
{
background-position:0 -34px;
cursor: pointer;
border: none;
}
Sous FF/Chrome/Safari tout est nickel, lorsqu'il y a l'action de cliquer, la directive CSS .bouton:active est appliquée.
par contre sous IE, elle n'est pas prise en compte.