28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Skin input text

Bonjour à vous tous et merci d'avance pour votre aide.

J'ai reussi à fair un skin pour mes input-text.
Mais par soucis de perfectionnisme, demander aux pros du CSS si la méthode utilisé est la meilleur?


<div class="input_text">
<input type="text" class="" value="Introduiez votre adresse mail">
</div>




.input_text{
	background-image: url(../images/input_text.png);
	background-repeat: no-repeat;
	background-position: left 2px;
	height: 31px;
	padding-left: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	width: auto;
	margin-left: 20px;
}

input[type=text]{
	background-image: url(../images/input_text.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 270px;
	height: 29px;
	display: block;
	color: #125B18;
	line-height: 29px;
}


Le resultat ce trouve sur cette page
http://www.mmcontainer.be/

Pour le PNG
http://www.mmcontainer.be/images/input_text.png

Merci à vous
Modifié par Rifton007 (11 Sep 2010 - 11:49)
Bonjour Rifton007

Je me suis rendu sur la page que tu donne en lien et malheureusement je n'ai vu d'input nul part Smiley ohwell Mais bon peu importe.

D'abord je ne comprend pas pourquoi tu utilise une image à moitié décalée
upload/32386-inputtexto.png
Du coup j'ai fais quelques test avec celle ci
upload/32386-inputtext.png

Je ne suis pas un pro du css mais il me semble qu'une syntaxe du genre input[type=text] n'est pas reconnu par IE, en tout cas chez moi IE7 n'en veux pas.

Ci-dessous une façon de faire qui fonctionne (à verifier sous IE6)

<div class="input_text"> 
	<input type="text" class="noborder"  value="Indiquez votre adresse mail ici"> 
</div>


<style type="text/css">
.input_text{ 
    background-image: url(background_input_text.png); 
    background-repeat: no-repeat; 
	width: 300px; 
    height: 31px; 
	padding-left: 15px;	
} 
 

.noborder
{
	border-color: transparent;
	border: none; 
    width: 280px; 
    height: 15px;  
	margin-top:6px;
    color: #125B18; 
	background:transparent;
}
</style>
Oui bon voila, d'abord c'est pas IE7 mais IE8 et puis c'est sur que faire des tests sans DOCTYPE ...

En tout cas Heyoan c'est gentil de me reprendre sur tous mes posts Smiley rale Smiley cligne
Bonjour à vous tous
Tout d'abord

a écrit :
Je me suis rendu sur la page que tu donne en lien et malheureusement je n'ai vu d'input nul part

Effectivement, erreur de manipulation, la bonne page est à jour désormais.

a écrit :
D'abord je ne comprend pas pourquoi tu utilise une image à moitié décalée

L'utilité de cela, et de pouvoir utiliser le même background, quelque soit la longeur de l'input.

a écrit :
Il devrait : cf. http://www.quirksmode.org/css/contents.html

Par contre je ne suis pas parvenue à trouver [type=text] dans le site.

Merci à vous.
Rifton007 a écrit :
la bonne page est à jour désormais.
Toujours pas vu d'élément INPUT...

Rifton007 a écrit :
L'utilité de cela, et de pouvoir utiliser le même background, quelque soit la longeur de l'input.
Ben pas plus que la seconde image proposée par Omanu...

Rifton007 a écrit :
Par contre je ne suis pas parvenue à trouver [type=text] dans le site.
Oui, je n'ai pas été très clair : cela fait référence aux différents sélecteurs CSS 2.1 (en l'occurrence le sélecteur d'attribut).

Sinon sur le principe c'est bon (un second élément qui permet de modifier la taille du background) sauf qu'il s'agit d'INPUT et qu'il faut l'associer à un élément LABEL explicite. Du coup il vaudrait mieux utiliser un SPAN qu'un DIV pour avoir :
<p>
	<label for="texte">Texte : </label>
	<span class="input_text"><input type="text" name="texte" id="texte" /></span>
</p>


Edit: en repassant par là il me semble que le plus simple à faire c'est :
.input_text label, .input_text span, .input_text input {
	display: inline-block;
	vertical-align: middle;
	height: 27px;
	line-height: 27px;
	padding: 1px 0;
}
.input_text span {
	background: url(fond_input.png) left top no-repeat;
	padding-left: 10px;
} 

.input_text input {
	background: url(fond_input.png) right top no-repeat;
	width: 250px;
	color: #125B18;
	border: none;
}
<p class="input_text">
	<label for="texte">Texte :</label>
	<span>&nbsp;</span><input type="text" name="texte" id="texte" />
</p>
(avec la seconde image d'Omanu)
Modifié par Heyoan (11 Sep 2010 - 00:17)
a écrit :
Ben pas plus que la seconde image proposée par Omanu...

Effectivement, en réflechissant bien, ça ne servait à rien mon truc lol.


Merci Omanu pour l'éclaircissement au sujet du background.
Heyoan, avec tout les post où tu ma aidé, je me sent vraiment redevable envers toi.
Comme toujours , mille fois merci.

Au plaisir et probléme RESOLU Smiley lol
Sujet clos
Aller à