CSS d'un input : Modifier la hauteur du "value"

Version imprimable

1 pièce(s) jointe(s)

Bonjour a tous,

Est ce qu'il est possible de modifier la hauteur du value dans un input svp ?

Je tente de le faire depuis un moment mais sans succès.

Voici mon code html :

Code:

1
2
3
<form name="rech" method="post">
<input type="submit" id="submit" name="submit" class="boutonnew empty vert" value="lorem ipsum et bla et bla"></input>
</form>

Voici le CSS associé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.boutonnew {
	width:170px; 
	height:60px;
	padding:8px 0; 
	text-align:center; 
	text-decoration:none;
	display: inline-block;
	margin-top:20px;
	float:left; 
	margin:0 15px 15px 0; 
	font-size: 20px; 
	border-radius:7px; 
	box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1); 
	font-size: 23px; 
	color:#333; 
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
 
}	
.boutonnew.vert {
	background: #91BD09;
	background: -webkit-linear-gradient( #91BD09, #4E9939); 
	background: -moz-linear-gradient( #91BD09, #4E9939); 
	background: -ms-linear-gradient( #91BD09, #4E9939); 
	background: -o-linear-gradient( #91BD09, #4E9939); 
	background: linear-gradient( #91BD09, #4E9939);
	}
.boutonnew.vert:hover{
	background: #A3C416;
	background: -webkit-linear-gradient( #A3C416, #55A53C);
	background: -moz-linear-gradient( #A3C416, #55A53C);
	background: -ms-linear-gradient( #A3C416, #55A53C);
	background: -o-linear-gradient( #A3C416, #55A53C);
	background: linear-gradient( #A3C416, #55A53C);
	}	
.boutonnew.vert:active{box-shadow: 1px 1px 10px #285419 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}
.boutonnew.vert {color:#3D722E; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
 
input[type=submit] {
width: 169px;
height:76px;
border:0;
display: inline-block;
vertical-align: middle;
font-size:22px; 
}

Résultat : le texte est coupé sur le bouton, je souhaite qu'il m'affiche tout le texte sans modifier les dimensions du bouton
Pièce jointe 161578

Merci d'avance
Cordialement,

16/11/2014, 17h53
NoSmoking

Bonjour,
en première remarque ce qui me vient c'est l'intérêt de mettre du texte à rallonge dans un élément de type submit, on devrait trouver, Soumettre - Envoyer - Valider, mais pas bien plus!

Citation:

je souhaite qu'il m'affiche tout le texte sans modifier les dimensions du bouton

Dans ce cas il te faut modifier la font-size du texte mais même avec cela sur un élément de type INPUT cela ne renverra pas le texte à la ligne.
En utilisant un élément de type BUTTON celui ci passera au moins à la ligne.
17/11/2014, 09h32
Bisûnûrs

Il suffit de faire une recherche sur le forum :
http://www.developpez.net/forums/d36...t-bouton-html/

Sinon, utiliser un élément button plutôt qu'un élément input, mais dans les deux cas, il faut que tu définisses toi-même le point de césure.

1 pièce(s) jointe(s)

Je suis effectivement passé par un élément de type button et le texte se met à la ligne tout seul.

Maintenant, j'ai un autre problème : quand j'affiche tout mes boutons il semble y avoir un décalage :
Pièce jointe 161627
Les boutons sont décalés et je ne comprend pas pourquoi !!

Voici le code html/PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
echo "<div style='height:auto;margin:0 auto;'>" ;
echo "<form name='' method='POST' style='width:562px;margin:0 auto;text-align:center;'>";
$SQLInfoGauche = "SELECT Nom_MicroArret FROM microarret WHERE Equipement_MicroArret = '".$ValGauche."'" ;
$resultSQLInfoGauche = $link->query($SQLInfoGauche) or die($link->error.__LINE__);
if($resultSQLInfoGauche->num_rows > 0) {
	while($rowequipementG = $resultSQLInfoGauche->fetch_assoc()) {
		echo "<button id='button' name='submit' type='submit' class='boutonnew empty vert' value='".$rowequipementG['Nom_MicroArret']."'>".$rowequipementG['Nom_MicroArret']."</button>";	
	}
}
echo "</form>";
echo "</div>" ;
?>

code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.boutonnew {
	width:172px; 
	height:90px;
	padding:8px 0; 
	text-align:center; 
	text-decoration:none;
	display: inline-block;
	margin:0 15px 15px 0; 
	font-size: 20px; 
	border-radius:8px; 
	box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1); 
	font-size: 23px; 
	color:#333; 
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
 
}	
.boutonnew.vert {
	background: #91BD09;
	background: -webkit-linear-gradient( #91BD09, #4E9939); 
	background: -moz-linear-gradient( #91BD09, #4E9939); 
	background: -ms-linear-gradient( #91BD09, #4E9939); 
	background: -o-linear-gradient( #91BD09, #4E9939); 
	background: linear-gradient( #91BD09, #4E9939);
	}
.boutonnew.vert:hover{
	background: #A3C416;
	background: -webkit-linear-gradient( #A3C416, #55A53C);
	background: -moz-linear-gradient( #A3C416, #55A53C);
	background: -ms-linear-gradient( #A3C416, #55A53C);
	background: -o-linear-gradient( #A3C416, #55A53C);
	background: linear-gradient( #A3C416, #55A53C);
	}	
.boutonnew.vert:active{box-shadow: 1px 1px 10px #285419 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}
.boutonnew.vert {color:#3D722E; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}

Merci d'avance
Cordialement

17/11/2014, 10h58
ryan

Yop!

Ajouter un "float: left;" dans le style de .boutonnew?