[Résolu] Styliser un champs de recherche

Bonjour,

J'aime changer le style d'un champs de recherche (input text + submit button), comme ici:



Est ce que vous avez une idée sur les propriétés qu'il me faut apprendre pour le faire?
(faire en sorte que les 2 éléments ne soit pas distincts et qu'ils ont le même background)

Merci pour votre aide.
Modifié par Youn (05 Nov 2011 - 10:11)

bonjour,

essai d'utiliser les formulaire html5 input type="search"

et sur le css

/input[type=search]{
    background-color:#000;
    border-radius:8px;
}

par exemple

Hello,

INPUT de type text (ou éventuellement "search") pour le champ texte. background pour le fond, border pour la bordure, border-radius pour l'arrondi. Pour gérer la hauteur, je te conseille de fixer ton élément en line-height:auto (c'est de toute façon la valeur forcée dans Firefox), et de jouer sur le padding (un peu en haut et en bas + du padding à gauche + un padding important à droite).

Si tu souhaites que ta loupe fasse office de bouton de validation, je te conseille d'utiliser un élément INPUT de type "image" (équivalent d'un submit, mais utilisant une image avec un attribut alt), et de le positionner en absolu pour le placer par dessus ton champ texte à droite (d'où le padding-right nécessaire pour le champ texte).

En prenant en considération ce qu'à dit fvsch :

HTML :

<div id="zone_recherche">
	<input id="texte_recherche" type="text" value="Search" />
	<input id="bouton_recherche" type="image" src="bouton_recherche.png" alt="Rechercher" />
</div>

CSS :

body, input {
	margin: 0;
	padding: 0;
}

body {
	margin: 10px;
	background-color: #452519;
}

#zone_recherche {
	width: 260px;
	position: relative;
}

#texte_recherche {
	width: 198px;
	padding: 10px 50px 20px 10px;
	background-color: rgba(0,0,0,0.6);
	border: solid 1px #7a5440;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	font-family: arial, verdana, sans-serif;
	font-size: 18px;
	color: #7a5440;
}

#texte_recherche:focus {
	background-color: rgba(0,0,0,0.8);
	outline: 0 none; /* Pour enlever la "bordure" jaune qu'ajoute Google Chrome au focus */
	color: #fff;
}

#bouton_recherche {
	margin-top: -16px;
	position: absolute;
	top: 50%;
	right: 10px;
}

Voici l'image pour tester le bout de code ci-dessus :

Merci pour vos réponses, je l'ai terminé de mon côté, maintenant je prends notes de vos conseils et code pour l'améliorer encore.

Merci encore