web-dev-qa-db-fra.com

Comment définir la hauteur d'un champ de saisie (texte) en CSS?

Désolé pour cette question mais je n'arrive pas à trouver de réponse n'importe où. J'ai du code CSS qui devrait définir la hauteur de ma zone de texte. J'utilise VS2010 Express pour Windows Phone, le codage en HTML/CSS/Javascript/C #.

HTML 

<input class="heighttext" type="text" id="name">

CSS 

.heighttext{
  height:30px
}

Je peux régler la hauteur sur tout ce que j'aime, mais la zone de texte restera la même! Aidez-moi ou envoyez-moi au moins un lien qui peut!

htmlcsstextfield
30
Arrie

Essayez avec padding et line-height -

input[type="text"]{ padding: 20px 10px; line-height: 28px; }
44
Dipak

Les contrôles de formulaire sont notoirement difficiles à styliser multiplateforme/navigateur. Certains navigateurs respecteront une règle CSS height, d'autres non.

Tu peux essayer line-height (peut avoir besoin display:block; ou display:inline-block;) ou top et bottom padding également. Si aucun de ces éléments ne fonctionne, c'est à peu près tout - utilisez un graphique, positionnez le input au centre et définissez border:none; donc il ressemble comme le contrôle de formulaire est grand mais ce n'est pas le cas ...

3
danwellman

Vous devez utiliser la taille de police pour contrôler la hauteur, elle est largement prise en charge par les navigateurs. Et pour ajouter de l'espacement, vous devez utiliser un rembourrage. Par exemple,

.inputField{
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}
1
Rusty

N'utilisez pas la propriété height dans le champ de saisie.

Exemple:

.heighttext{
    display:inline-block;
    padding:15px 10px;
    line-height:140%;
}

Utilisez toujours la propriété padding et line-height css. Son travail parfait pour tous les appareils mobiles et tous les navigateurs.

1
HAPPY SINGH

Vous utilisez ce code de style

.heighttext{
 float:right;
 height:30px;
 width:70px;
 }
0
Saeed