28172 sujets

CSS et mise en forme, CSS3

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".


  <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.