Zone de recherche arrondie[Résolu]

bonjour,
je voudrai créer une zone de recherche dont les bords sont arrondis, et non simplement une zone de saisie rectangulaire. Je pense que c'est possible avec une image mais je ne sais pas du tout comment faire.
merci de m'éclairer si vous connaisser l'astuce!
Modifié par charlylalou (08 Oct 2007 - 12:55)

Bonjour,
l'astuce consiste à masquer toutes les bordures du champ input et à y placer
un background CSS avec ton image arrondie.
Modifié par Hermann (08 Oct 2007 - 15:06)

Merci de ta réponse ça fonctionne bien sauf que sur IE lorsqu'on dépasse le nombre de caractere que peut contenir l'image, c'est un bloc blanc par defaut qui prend le relais du fond puisque l'image part vers la gauche...alors que sur FF, l'image reste fixe, c'est juste la zone de saisie qui s'adapte à la longeur de la chaine de caractères saisis, quelqu'un sait pourquoi??
merki

En gardant à l'esprit que ça pourrait ne pas passer dans tel ou tel navigateur.

Cf. http://blog.alsacreations.com/2007/06/12/366-comment-ne-pas-styler-les-elements-de-formulaire
Modifié par Florent V. (08 Oct 2007 - 17:27)

okok, c'est toujours le même problème...je commence à m'y faire finalement ^o^ en plus je suis en train de voir les points de contrôle du wcag et donc je vais sûrement laisser tomber cette histoire d'image de fond, si il n'y a aucun moyen de palier ce probleme sur IE...ya aucun moyen hein c'est sûr, où il faut que je creuse!!!
merci pour la précision non négligeable

Alors pour ceux que ça intéresse j'ai une solution pour les zones de recherche à bords arrondis et cela fonctionne aussi bien sur FF que sur IE donc le probleme précédent est résolu!!!

 <div id="quicksearchbar">
                    <form name="rcmqsearchform" action="./" onsubmit="rcmail.command('search');return false" style="display:inline;">
                      <input name="_q" type="search" results="5" id="quicksearchbox" />
                    </form><a href="#" onclick="return rcmail.command('reset-search','',this)" title="Reset search"></a>
                    <input type="image" name="imgField" title="recherche" src="elmt_graph/info.gif" id="imageFld" style=" vertical-align:bottom;"/>  
                   
                  </div>

voici donc pour le code html, il suffit ensuite d'adapter les styles avec une image de fond pour le div "quicksearchbar" et de rendre la zone à l'intérieur (quicksearchbox) transparente avec une largeur n'exédant pas celle de notre image de fond:

#quicksearchbar
{
  float:left;
  top: 60px;
  right: 30px;
  width: 135px;
  height: 20px;
  text-align: right;
  background: url('../elmt_graph/recherch.gif') top left no-repeat;
}

#quicksearchbar a
{
  position: absolute;
  top: 3px;
  right: 4px;
  text-decoration: none;
}

#quicksearchbar img
{
  vertical-align: middle;
}

#quicksearchbox
{
  float:left;
  top: 2px;
  left: 20px;
  width: 90px;
  font-size: 11px;
  padding-left: 3px;
  margin-left:4px;
  border: none;
  background:transparent; 
  padding-top:2px;
}


/*\*/
html>body*#quicksearchbar[id$="quicksearchbar"]:not([class="none"]) { background-image: none; }
html>body*#quicksearchbar[id$="quicksearchbar"]:not([class="none"]) a { top: 5px; }
html>body*#quicksearchbar[id$="quicksearchbar"]:not([class="none"]) #quicksearchbox { width: 180px; top:0px; right: 1px; left: auto; }
/**/

voilà, pour ma part je suis satisfaite!! mais ensuite à vous de voir si c'est pertinent pour l'accessibilité. En tout cas ça fonctionne au moins sur les deux navigateurs que j'ai cité.
Modifié par charlylalou (09 Oct 2007 - 09:55)