テキストエリアの横の幅(縦の高さ)をcssで制御する

テキストエリアのリサイズの制御は resize で指定する。

幅を変えられないようにする

縦の高さのみを変えられるようにするには

textarea {
  resize: vertical;
}

とする。縦の高さの最大値(最小値)は

textarea {
    resize: vertical;
    max-height: 500px;
    min-height: 100px;
}

と指定する。

高さを変えられないようにする

横の幅のみを変えられるようにするには

textarea {
    resize: horizontal;
}

とする。横の幅の最大値(最小値)は

textarea {
    resize: horizontal;
    max-width: 500px;
    min-width: 100px;
}

と指定する。

横と縦の両方でリサイズを禁止する

textarea {
    resize: none;
}

none にするとテキストエリアの大きさはデフォルトの大きさで固定される。

広告