[JS] Style sur les formulaires

Si vous devez faire un design au « pixel près », vous serez embêté avec les formulaires.

Cas 1 – Formulaire par defaut

Si le graphiste à laissé les styles par défaut, ça devrais vous faciliter le travail, mais… Chaque navigateur à son propre rendu d’affichage et le plus embêtant dans ses styles c’est … (roulement de tambours)… Safari et Chome (moteur de rendu Webkit).

Le champ de type search possède une appearance de type searchfield et non de type textfield et le champ de type select à lui aussi sont propre rendu.

Pour écraser ce style par défaut de Webkit, voici une base CSS :

[type="search"]{ -webkit-appearance: textfield; }
select{ -webkit-appearance: none; }

Ainsi, les styles seront comme les autres navigateurs

Cas 2 – Formulaire personnalisé


Si le graphiste à mis des style dans le formulaire, il existe plusieurs librairies JavaScript qui permettent de le faire facilement.

  1. Uniformjs
  2. jqTransform
  3. DropKick
  4. ryanfait.com
  5. jqIdealforms
  6. prettyCheckable
  7. Changer le style du bouton Parcourir

Et voilà, en espérant que ça vous aura aidé !