Change la forme de input

Question

stephcache

17 Dec 2011 à 22:31

Bonsoir, sur une input invalide je change la couleur de la bordure en rouge mais le problème sa change aussi la forme par défaut de l'input.

Je me demande comment on peut changé sa ?

Merci

unami

17 Dec 2011 à 23:20

Salut

Peux tu fournir plus de détails, j'arrive pas à comprendre ton problème. Smiley smile

stephcache

18 Dec 2011 à 10:58

oui bien sur, j'ai un balise input texte sur firefox de forme par défaut. quand je veux même un cadre rouge autour pour dire que ce qui est écrit est pas bon sa me transforme la forme de l'input normal en border-style: insert alors que je n'ai fait que mettre border: 2px solid red
Modifié par stephcache (18 Dec 2011 - 10:59)

lddsoft

18 Dec 2011 à 18:08

Bonsoir,

Dommage que tu ne nous montres pas ton code Smiley ohwell

.
Pour changer dynamiquement le style de ton input, tu dois faire appel à javascript. Il faut néanmoins garder à l'esprit que l'utilisateur peut avoir désactivé ce dernier!
Voici un exemple tout simple pour te donner une idée; tu adaptes en fonction de ton script...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>input avec bord rouge sous FF</title>
  </head>
  <body>
<form action="#">
	<input type="text" size="12" id="inp" />
	<input type="button" value="Bordure rouge" onclick="document.getElementById('inp').style.cssText='border:2px solid red';" />
</form>
  </body>
</html>

Tu trouveras sur ce même forum une idée faisant appel au PHP : ICI

Cordialement

stephcache

18 Dec 2011 à 19:00

Merci pour ton code mais je voudrais bien me passé de javascript. J'ai vue que c'était possible sur ce site: http://www.grafikart.fr/tutoriels/html-css/form-validation-css3-html5-268

Ce que je comprend pas c'est que lui sa ne fait qu'une bordure rouge ou vert mais sa ne change pas la forme de l'input


<style type="text/css">
#contacte {border: 2px solid #cc04c2; border-radius: 15px; background-color: #000; width: 700px; margin-left: auto; margin-right: auto; padding: 10px; padding-bottom: 0; color: #fff;}
#titre {text-align: center; color: #fc1109; font: bold 130% arial; margin: 0; padding: 0;}
#presentation {margin: 2px; margin-top: 10px; padding: 5px; background-color: #333; border-radius: 15px; color: #fff; font-weight: bold; text-align: justify;}
#bloc {margin-top: 10px; margin-bottom: 0; padding: 5px; border-radius: 15px; background-color: #333;}
#nom,#prenom,#nom_societe,#adresse,#cp,#ville,#tel,#mail,#site {margin-left: 10px; margin-top: 5px; display: inline-block;  font: bold 110% time;}
#text {text-align: center; margin-top: 5px;}
#val_res {text-align: center; margin-top: 5px;}
</style>

<div id="contacte">

<div id="titre">Cr&eacute;ation d'un site web</div>

<div id="presentation">Si vous avez aimez la r&eacute;alisation de ce site et sa quallit&eacute; graphique. Vous pouvez d&eacute;poss&eacute; un message avec tous les renseignements demand&eacute; afin de prendre contacte avec moi.</div>

<form action="contenu.php?choix=contacte&envoie=oui" method="post" name="formulaire">

<div id="bloc">

<div id="nom"><b>Votre Nom : </b><input type="text" size="31" name="nom" pattern="^[A-Z]{1,}([- ]{1}[A-Z]{1,})?$" required /></div>

<div id="prenom"><b>Votre Pr&egrave;nom : </b><input type="text" size="31" name="prenom" pattern="^[a-zéèàùôöûüä]{1,}([- ]{1}[a-zéèàùôöûüä]{1,})?$" required /></div>

<div id="nom_societe"><b>Votre nom de soci&eacute;t&eacute;e : </b><input type="text" size="75" name="nom_societe" required /></div>

<div id="adresse"><b>Adresse de la soci&eacute;t&eacute;e : </b><input type="text" size="75" name="adresse" required /></div>

<div id="cp"><b>Code postal de la soci&eacute;t&eacute;e : </b><input type="text" size="4" name="cp" pattern="^[0-9]{5}$" placeholder="02587" required /></div>

<div id="ville"><b>Ville de la soci&eacute;t&eacute;e : </b><input type="text" size="34" name="ville" required /></div>

<div id="tel"><b>Num&eacute;ros de t&eacute;l&eacute;phone : </b><input type="tel" size="10" name="tel" pattern="^0[1-678]([0-9]{2}){4}$" placeholder="0925655852" required /></div>

<div id="mail"><b>Votre adresse mail : </b><input type="email" size="32" name="mail" placeholder="bloodline@legtux.org" pattern="^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$" required /></div>

<div id="site"><b>Adresse du site si il en existe d&eacute;j&agrave; un : </b><input type="url" size="57" name="site" pattern="(((https?|ftp)://(w{3}\.)?)(?<!www)(\w+-?)*\.([a-z]{2,4}))" placeholder="http://bloodline.legtux.org" /></div>

<div id="text"><textarea cols="80" rows="10" name="message" required /></textarea></div>

<div id="val_res"><input type="submit"/><input type="reset" /></div>

</form>

</div>

</div>

Modifié par stephcache (18 Dec 2011 - 19:05)

gc-nomade

18 Dec 2011 à 21:18

bonsoir,

chez moi , si tu indique un border: solid red; il n'y a pas de border:inset red ; à la place. Verifis ton code css : sélecteurs, propriétés et valeurs.

Ceci dit , les élément de formulaire dépendent en partie du systeme d'exploitation et les possibilité de styles sont limitées et variables d'un navigateur a l'autre.

adjoint a ton border:solid; eventuellement un box-shadow (inset et/ou pas) , voir un outset comme le fond certains navigateurs par défaut.

Cordialement,
GC

stephcache

19 Dec 2011 à 12:18

finalement j'ai trouvé, je devais devoir de style de l'input avec css pour que sa me donne le résultat voulu.

Merci tout de même

Sujet clos

CSS et mise en forme, CSS3

Change la forme de input