Un peu de patience : ca arrive !

Vous vous êtes toujours demandé s’il était possible d’arrondir les bords de vos champs input, textarea et autres de vos formulaires : la réponse aujourd’hui est oui ! Aujourd’hui habitué à JQuery je vous dirais que c’est encore grâce à cette librairie que nous allons nous en tirer, mais vu que c’est le premier post : je ne peux pas … Passons ! Au boulot !

Avant de commencer, les explications

Le script que nous allons découvrir se base sur un principe simple qui est l’imbrication de plusieurs blocs (div) auxquels nous allons appliquer quelques modifications. Et oui, je vais vous décevoir, mais les belles bordures arrondies que vous aller voir ne sont pas directement celles du champs ! Rien ne vaut un schéma et pour preuve :

Votre champs est imbriqué dans un premier conteneur aux bords arrondis (ce conteneur doit avoir la même couleur que votre champs – ici il en jaune pour que vous puissiez bien le distinguer). Puis le tout est encore imbriqué dans un autre conteneur aux bords arrondis. Résultat, l’écart entre les deux blocs div fait l’épaisseur de votre bordure ! Et pour encore plus vous décevoir, le scripts utilise un plugin JQuery déjà existant « JQuery Corner » (jquery.corner.js) qu’il vous faut télécharger (sans oublier jquery.js) et  qui permet d’arrondir les coins de vos blocs CSS ! Et bien c’est parfait, nous avons tout ce qu’il nous faut ! Tout ? Presque ! Vous oubliez qu’arrivé à ce stade il vous faudrait appliquer tous ces blocs manuellement  à chaque champs … C’est donc la nouveauté qu’apporte le inputCornerPlugin !

Le rendu

Vous pouvez consulter la démo

Le code

/* Fonction corner pour les champs de formulaires */
/* La nouveaute ***********************************/

function arrondirChamps(idChamps, classeConteneur, classeBordure){
	var champs 			= $('#'+idChamps);
	var largeurChamps 	= champs .css("width");
	var largeurInjection= parseInt(largeurChamps) + 8;
	injection 			= champs.wrap("<div class='"+classeConteneur+"'></div>").parent();

	injection.wrap('<div class="'+classeBordure+'" style="width: '+largeurInjection+'px;"></div>');
	injection.corner("round 4px").parent().css('padding', '1px').corner("round 5px");
}

$(document).ready(function() {
	$("input.arrondi, textarea.arrondi, select.arrondi").each(function(){
		arrondirChamps($(this).attr('id'),'conteneur-arrondi','bordure-arrondie');
	});
});

<!-- Appel Jquery -->
<script type="text/javascript" src="jquery.js" ></script>
<!-- Appel du plugin jquery.corner.js : http://malsup.com/jquery/corner/ -->
<script type="text/javascript" src="jquery.corner.js" ></script>
<!-- La CSS très important pour 3 classes -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Le code CSS est ici important, et permet de traiter les style de chaque block comme il se doit !

@charset "utf-8";

/* Bordure */
div.bordure-arrondie {
	/* Couleur de la bordure */
	background: #CECECE;
}

/* Conteneur */
div.conteneur-arrondi{
	/* Fond de l'element formulaire : doit $etre le même que celui du champs */
	background-color: #FFFFFF;
	padding: 2px;
}

/* Champs Input */
input.arrondi{
	border:0;
	background-color: #FFFFFF;
	color:#969696;
}

Un petit Formulaire d’exemple :

<table border="0">
    <tr>
        <td><label >Nom</label></td>
    <td><input type="text" name="author" id="author" class="arrondi" value="" size="25" aria-required='true' /></td>
    </tr>
    <tr>
        <td><label>Fonction</label></td>
        <td>
            <select name="Fonction" id="Fonction" class="arrondi"><br />
                <option value="Programmeur">Programmeur</option>
                <option value="Designer">Designer</option>
                <option value="Autre">Autre</option>
            </select>
    	</td>
    </tr>
    <tr>
        <td colspan="2"><textarea name="comment" id="comment" class="arrondi" rows="6" style="width:300px;max-width:300px;" ></textarea></td>
    </tr>
</table>

Voilà tout devrait marcher si vous avez bien suivit ces étapes ! Il ne me reste plus qu’à … ah ! On me signale qu’il y a des fainéant dans l’assemblée (oui je les aperçois mieux maintenant) Bien puisque c’est comme ca alors voici un petit paquet “out of the box”, faites en bon usage, et n’hésitez pas à me faire signe si problème ou suggestion il y a !

Bonjour et bienvenue à tous sur ce qui est aujourd’hui le premier rayon de Dream Ressources, un blog comme tous les autres, mais dans ses débuts. Je suis actuellement en train de migrer l’ancien thème (qui est en fait celui que vous voyez) en version wordpress et c’est pourquoi il se peut que vous rencontriez quelques bug… Comme on en raffole pas, je compte sur vous pour m’en signaler le cas échéant, et je vous en suis reconnaissant d’avance!

Parlons peu et partons vite : le web ne nous attends pas, et c’est pourquoi j’ai décidé d’attaquer directement par ce qui est un petit tutoriel sur comment arrondir les bordures des champs de formulaires en Jquery et CSS !

Laissez moi un jour ou deux pour vous rédiger cela… En attendant : portez vous bien !

Cordialement,