Même si les normes CSS3 pointent doucement leur nez sur les navigateurs récents à coups d’arrondis et ombres portées générées via nos chères feuilles de style, la démocratisation reste encore bien faible, parcimonieuse sur certains navigateurs, inexistante sur d’autres. Aussi, avec le souhait de pouvoir jouer avec les éléments web jusque dans les moindres détails j’ai effectué plusieurs recherches sur la personnalisation des champs de formulaire (et principalement les ‘input’ dans l’exemple ci-contre même si par extension il reste applicable à du ‘textarea’ et ‘select’) pour en arriver finalement à une solution radicale mais efficace : Aussi, plutôt que de chercher à customiser coûte que coûte le champ en lui-même, j’ai abordé la problématique sous un autre angle en habillant avant tout mon div conteneur et placer par dessus notre champ de formulaire de manière transparente en jouant sur le CSS de ce dernier. Voici les étapes à aborder et à adapter selon le design souhaité…
1. Réalisation du champ sous Photoshop (ou assimilé).
L’avantage étant de s’affranchir totalement des règles CSS et XHTML, on peut se faire plaisir sur le design de notre champ tout en gardant à l’esprit que notre ensemble devra permettre de contenir un champ texte et éventuellement un bouton de validation, dans mon exemple on va créer un champ de recherche comprenant à la fois notre champ texte pour que l’internaute puisse mettre les mots clés de recherche suivi d’un bouton matérialisé sous la forme d’une loupe qui permettra de lancer la recherche.
2. Découpage et intégration web.
Maintenant que notre image est prête, on la découpe selon les dimensions souhaitées et on exporte notre illustration de préférence au format .png si le champ comprend des ombres portées ou autres effets que l’on souhaite garder pour notre intégration finale.
L’image générée a des dimensions de 216 par 55 pixels, on peut désormais passer à l’intégration de celle-ci.
On va se servir d’un div conteneur comme base de notre intégration, celui-ci va comprendre notre image comme fond et nous ajoutons ensuite un champ input pour le texte et un bouton pour la validation du formulaire.
Code HTML
<div id=”recherche”>
<input type=”text” value=”rechercher” />
<input type=”button” value=”" />
</div>
code CSS
#recherche {
height:55px;
widht:216px;
}
#recherche .champ {
background:transparent;
border:none;
color:#006666;
font-family:verdana;
}
#recherche .bouton {
background:transparent;
border:none;
}
<div id=”recherche”>
<input type=”text” value=”rechercher” class=”champ” />
<input type=”button” value=”" class=”bouton” />
</div>
code CSS
#recherche {
background:url(img/fond-form.png);
height:39px;/* 55 – 16 = 39 */
padding:16px 0 0 26px;/* Ces valeurs, permettant de caler notre contenu, sont retirés pour la hauteur et la largeur de notre bloc #recherche */
width:190px;/* 216 -26 = 190 */
}
#recherche .champ {
background:transparent;
border:none;
font-family:verdana;
font-size:11px;
margin-right:10px;
width:135px;
}
#recherche .bouton {
background:transparent;
border:none;
cursor:pointer;
height:20px;
width:20px;
}
3. Aperçu et rendu
On obtient comme résultat notre formulaire de base et histoire de mieux comprendre véritablement ce qui a changé par rapport j’y ai ajouté l’aperçu en rouge de nos champs transparents (input et bouton) que nous avons paramétrés dans notre code CSS et que l’on est venu directement superposé par rapport à notre illustration de base.
4. Quelques exemples
N’hésitez pas à poser vos questions, émettre des remarques sur la personnalisation de formulaire ou tout autre chose plus ou moins en rapport avec le sujet
