textareaのサイズ変更可能なプロパティを無効にするにはどうすればよいですか？

2650

のサイズ変更可能なプロパティを無効にしたいtextarea。

現在、のtextarea右下隅をクリックしtextareaてマウスをドラッグすることで、サイズを変更できます。これを無効にするにはどうすればよいですか？

ここに画像の説明を入力してください

html  css 
— user549757
ソース
4
@JDIsaaks-さらに、特定の状況でサイズ変更を許可すると、レイアウトと印刷能力（現在のミッションクリティカルなプロジェクトの重要な側面）が壊れる可能性があります。
— random_user_name
10
サイズ変更できないテキスト領域が本当に必要な場合があります。たとえば、この場合、（条件付きで）textareaをラベルのように見えるものに変換します。横にランダムに浮かんでいるグラバーが付いたラベルがあるのは本当に奇妙に見えます。
— neminem 2015年
2
良いことすべての愛のために、実際のテキストエリアではこれを行わないでください。そうしないと、パワーユーザーを疎外することになります。中核的なブラウザー機能の破壊は核のオプションと見なされるべきです。
— 超夜明け

回答:

3532

次のCSSルールは、textarea要素のサイズ変更動作を無効にします。

textarea {
  resize: none;
}

（すべてではない）、いくつかのためにそれを無効にするにはtextarea、があります。■ オプションのカップル。

特定無効にするtextareaとnameに属性セットをfoo（すなわち、<textarea name="foo"></textarea>）：

textarea[name=foo] {
  resize: none;
}

または、id属性（つまり<textarea id="foo"></textarea>）を使用します。

#foo {
  resize: none;
}

W3Cのページ制限のサイズを変更するためのリストの可能な値：なし、両方とも、水平、垂直、および継承：

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

まともな互換性ページを確認して、現在この機能をサポートしているブラウザを確認してください。Jon Hulkaがコメントしたように、CSSでは、max-width、max-height、min-width、およびmin-heightを使用して寸法をさらに制限できます。

知っておくべき非常に重要：

このプロパティは、overflowプロパティが可視以外の場合を除き、何もしません。したがって、一般的にこれを使用するには、オーバーフローのようなものを設定する必要があります。

Sara Copeによる引用、 http：//css-tricks.com/almanac/properties/r/resize/

— ドーナツ
ソース
Firefox、Opera、IEのソリューションはありますか？
— –ŠimeVidas、2011
6
@ŠimeIEとFF3（およびそれ以前）では、サイズ変更のサポートが追加されないため、それらの解決策は必要ありません。FF4の場合、このソリューションは機能するはずです。
— ドーナツ
24
通りdavidwalsh.name/textarea-resize -使用リサイズ：垂直またはサイズ変更：横一次元にリサイズ制約します。または、max-width、max-height、min-width、min-heightのいずれかを使用します。
— Jon Hulka、2012年
3
属性ではなくcssを使用してこれを設定するのがおかしいと思うのは私だけですか？CSSを使用して無効またはチェック済みのプロパティやその他のプロパティを設定できないのはなぜですか
— Buksy
6
@Buksy「無効」は状態であり、視覚的なプロパティではありません。したがって、スタイリング言語によって決定されるべきではないことは論理的です。
— Kroltan 2016
105

私は2つのことを見つけました：

最初

textarea{resize: none}

これはCSS 3であり、まだリリースされていません。Firefox4以降、Chrome、Safariと互換性があります。

もう1つのフォーマット機能はoverflow: auto、dir属性を考慮して、右のスクロールバーを取り除くことです。

コードとさまざまなブラウザー

基本的なHTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

一部のブラウザ

  • Internet Explorer 8

ここに画像の説明を入力してください

  • Firefox 17.0.1

ここに画像の説明を入力してください

  • クロム

ここに画像の説明を入力してください

— ラミ・ジャムレー
ソース
62

CSS 3には、これを可能にするUI要素の新しいプロパティがあります。プロパティはresizeプロパティです。したがって、以下をスタイルシートに追加して、すべてのtextarea要素のサイズ変更を無効にします。

textarea { resize: none; }

これはCSS 3プロパティです。互換性チャートを使用して、ブラウザの互換性を確認してください。

個人的には、textarea要素のサイズ変更を無効にするのは非常に煩わしいと思います。これは、デザイナーがユーザーのクライアントを「破壊」しようとしている状況の1つです。デザインがより大きなテキストエリアに対応できない場合は、デザインの動作を再検討する必要があります。どのユーザーもtextarea { resize: both !important; }自分のユーザースタイルシートに追加して、設定を上書きできます。

— ジェームズ・サムナーズ
ソース
しかし、それは、自分のレイアウトのサイズを変更するだけで何かがうまくいかなくなるユーザーではなく、意図的にレイアウトを壊すユーザーですtexarea
— Redwolfプログラム
21

深いサポートが必要な場合は、古い学校のテクニックを使用できます。

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}
— エフゲニー
ソース
7
またresize:none、このソリューションと一緒に使用して、ハンドルが下隅に表示されてイライラして動作しないのを防ぎます。
— MacroMan、2015
13

これはHTMLで簡単に実行できます。

<textarea name="textinput" draggable="false"></textarea>

これでうまくいきます。デフォルト値は属性true用draggableです。

— サイタシー・ウィクラマシンゲ
ソース
これはHTML 5属性であるため、新しいブラウザーのみがサポートされます。IEが9以降でサポートしているところを読みました。
— アントニー
4
これはほとんどのブラウザで機能します。すべての最新のブラウザで。
— スシタウィクラマシンゲ
— textareaの
@ AntonyD'Andreaこれは最新のChromeでは動作しません：jsfiddle.net/ps2v8df9
— Advait Junnarkar
6

resizeプロパティを無効にするには、次のCSSプロパティを使用します。

resize: none;

  • これをインラインスタイルプロパティとして次のように適用することもできます。

    <textarea style="resize: none;"></textarea>

  • または<style>...</style>要素タグの間に次のように：

    textarea {
    resize: none;
}
— Webeng
ソース
6

あなたは単にresize: none;あなたのCSSで使用します：

resizeプロパティは、ユーザーが要素のサイズを変更できるかどうかを指定します。

注： resizeプロパティは、計算されたオーバーフロー値が「可視」以外の要素に適用されます。

また、現時点ではInternet Explorerでサイズ変更はサポートされていません。

次に、サイズ変更のさまざまなプロパティを示します。

サイズ変更なし：

textarea {
  resize: none;
}

両方の方法（垂直および水平）のサイズ変更：

textarea {
  resize: both;
}

垂直方向にサイズ変更：

textarea {
  resize: vertical;
}

水平方向にサイズ変更：

textarea {
  resize: horizontal;
}

また、あなたが持っている場合widthやheight、あなたのCSSやHTMLに、それはより広範なブラウザのサポートで、あなたのテキストエリアのサイズ変更を防ぐことができます。

— アリレザ
ソース
3

CSS 3はこの問題を解決できます。残念ながら、現在使用されているブラウザの60％でのみサポートされています。

Internet ExplorerとiOSの場合、サイズ変更をオフにすることはできませんがtextarea、widthおよびを設定することでサイズを制限できますheight。

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

デモを見る

— オリオール
ソース
3

次のように単純にtextareaプロパティを無効にすることができます：

textarea {
    resize: none;
}

垂直または水平のサイズ変更を無効にするには、次を使用します

resize: vertical;

または

resize: horizontal;
— ピーター・モーテンセン
ソース
2

サイズ変更プロパティがどのように機能するかを示す小さなデモを作成しました。あなたや他の人にも役立つことを願っています。

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
スニペットを展開

— アンブジ・カンナ
ソース
1

では@style、カスタムサイズを指定して、サイズ変更機能を無効にすることができます(resize: none;)。

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— カルロスデジーザスバエズ
ソース
1
こんにちは。回答ありがとうございます。次回はコードをフォーマットしてください。
— バプティストミルマティアス
これはasp.net MVCベースの回答です。非常に素晴らしい。
— ヨギホスティング2018
0

すべてtextareaののサイズ変更を無効にするには：

textarea {
    resize: none;
}

特定ののサイズ変更を無効textareaにするには、属性、、nameまたはを追加して、id何かに設定します。この場合、名前はnoresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}
— アブク
ソース
-2

追加!importantすると機能します：

width:325px !important; height:120px !important; outline:none !important;

outline 特定のブラウザで青い輪郭を避けるだけです。

— ケルズ
ソース
6
!important属性を悪用しないでください。CSS属性でresize: noneサイズ変更機能を削除できる場合、幅と高さを修正しても意味がない
— Raptor
1
!important悪じゃない？
— Peter Mortensen
現在のChromeでは、水平方向のサイズ変更を停止していますが、textareaを垂直方向にサイズ変更できます。
— Junvakar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.