textarea de lignes, et des cols de l'attribut CSS

J'aimerais régler le textarea's rows et cols attributs via CSS.

Comment faire en CSS?

InformationsquelleAutor ASD | 2010-01-09
  1. 103

    width et height sont utilisés lorsque vous allez à la css route.

    <!DOCTYPE html>
<html>
    <head>
        <title>Setting Width and Height on Textareas</title>
        <style>
            .comments { width: 300px; height: 75px }
        </style>
    </head>
    <body>
        <textarea class="comments"></textarea>
    </body>
</html>
    • Comme par user2928048 la réponse ci-dessous, si vous utilisez "em" plutôt que de "px", alors vous pouvez spécifier la largeur et la hauteur en caractères comme vous le feriez avec des "lignes" et "colonnes" attributs. Fonctionne même avec IE6, je crois.
    InformationsquelleAutor Sampson
  2. 291
    <textarea rows="4" cols="50"></textarea>

    C'est équivalent à:

    textarea {
    height: 4em;
    width: 50em;
}

    où cadratin (1 em est l'équivalent de la taille de la police actuelle, ainsi que le texte de la zone de 50 caractères de large.
    voir ici.

    • Pour être plus exact, vous avez besoin de prendre padding et line-height en compte. Disons que vous avez un rembourrage de une demi-em en haut et en bas et un line-height de 1.2 em, alors la hauteur de 4 lignes seraient 1 + 4 * 1.2 = 5.8 em.
    • votre solution est correcte. Le problème est 4em = 4 x taille de police que ni les facteurs de la marge, ni la hauteur de la ligne
    • Si vous avez de la propriété box-sizing:content-box; vous n'aurez pas à vous soucier de rembourrage, de sorte que vous rester seulement à hauteur de la ligne.
    • Ce n'est pas vrai: jsfiddle.net/x1nf3z4p/1 (testé sur Chrome et Safari)
    • Nice @nalply, merci pour l'approche. L'ajout d'un peu de votre réponse, le calc() CSS3 fonction peut réduire la largeur/hauteur de calcul: dire que j'ai un textarea avec padding-top et padding-bottom 4px, et je veux qu'il soit 3 lignes de haut, la hauteur serait height: calc(3em + 8px);.
    InformationsquelleAutor user2928048
  3. 16

    Je ne pense pas que vous le pouvez. Je vais toujours avec la hauteur et la largeur.

    textarea{
width:400px;
height:100px;
}

    la bonne chose à propos de faire le CSS manière, c'est que vous pouvez tout à fait le style des. Maintenant, vous pouvez ajouter des choses comme:

    textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
    InformationsquelleAutor Code Monkey
  4. 4

    Autant que je sache, vous ne pouvez pas.

    D'ailleurs, ce n'est pas ce que CSS est pour de toute façon. CSS est pour le style et le HTML est pour le balisage.

    • CSS est pour le style de la représentation visuelle d'un élément. Cela inclut la largeur et la hauteur d'un textarea.
    • Ils ne sont pas les mêmes, le navigateur prend en compte la hauteur de texte sur chaque ligne, y compris line-height, padding sur le récipient (pas de calcul de la hauteur en fonction de box-sizing), même en tenant compte de différents rapports d'aspect des polices de caractères utilisées pour s'assurer de la zone de texte affiche le nombre de lignes de texte qui vous ne pouvez pas obtenir en utilisant des css hauteur.
    InformationsquelleAutor Moulde