タグを表示

CSSでテキストエリアをリサイズ不可にしたり任意の要素をリサイズ可能にする

ブラウザによってはテキストエリアをユーザが自由に広げたりできるようになっていますが、これを不可にしたりリサイズできる方向を指定したりするCSSプロパティについてメモメモ。

@kasumiiです。こんにちは。

忘れがちなのでちょこっとメモ。

ChromeやFirefoxなどでテキストエリアの右下をドラッグするとサイズを広げることができますが、これをCSSでリサイズ不可にしたり、リサイズ可能な方向を指定したりする方法です。

普段はデフォルトのままサイズ変更できたほうがいいと思いますが、たまーにサイズ変更できないようにしたい場合があるので。

textarea {
  resize: none;
}
textarea {
  resize: horizontal;
}
textarea {
  resize: vertical;
}
textarea {
  resize: both;
}

というか、resizeプロパティってCSS3だったんですねー。

テキストエリアをリサイズ不可にする以外にも、任意の要素にresize: both;を指定することでリサイズ可能にできるのは覚えておくと便利そうです。(でも、overflow: visible;が指定された要素には適用されないので注意!)

【参考】resize – CSS | MDN

このページの一番上へ

サイトのトップページへ

このページの一番下へ