web-dev-qa-db-ja.com

Textareaのサイズ変更可能プロパティを無効にする方法

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

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

enter image description here

htmlcss
2374
user549757

次の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 page には、制限のサイズ変更に有効な値がリストされています。none、both、horizo​​ntal、vertical、inherit：

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

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

知っておくことが非常に重要：

Overflowプロパティがvisible以外のものでない限り、このプロパティは何もしません。これはほとんどの要素のデフォルトです。そのため、通常これを使用するには、オーバーフローのようなものを設定する必要があります。

Chris Coyierによる引用、 http://css-tricks.com/almanac/properties/r/resize/

3148
Donut

CSSでは...

textarea {
    resize: none;
}
195
Jeff Parker

2つ見つけました

最初

textarea{resize:none}

これはcss3 まだリリースされていないで、 Firefox 4 + chromeおよびsafari と互換性があります

他のフォーマット機能は overflow：auto を考慮して右スクロールバーを取り除く dir attributeです。

コードと異なるブラウザ

基本HTML

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

一部のブラウザ

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • クロム

enter image description here

100
Rami Jamleh

CSS3には、これを可能にするUI要素の新しい性質があります。プロパティは resizeプロパティ です。そのため、すべてのtextarea要素のサイズ変更を無効にするには、スタイルシートに次のコードを追加します。

textarea { resize: none; }

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

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

60
James Sumners
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
23
Imtiaz Ali Baigal

あなたが深い支援を必要とするならば、あなたは古い学校の技術を使うことができます

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;
}
21
yevgeniy

これは簡単にHTMLで行うことができます

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

これは私のために働きます。 true属性のデフォルト値はdraggableです。

12
Thusitha Wickramasinghe

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

resize: none;

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

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

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

    textarea {
    resize: none;
}
5
Webeng

あなたのCSSでは単にresize: none;を使うだけです。

resize プロパティは、要素がユーザーによってサイズ変更可能かどうかを指定します。

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

また、 サイズ変更 はIEでは現在サポートされていません。

これは、サイズ変更のためのさまざまなプロパティです。

サイズ変更なし： 

textarea { 
  resize: none; 
}

両方向（縦と横）にサイズ変更： 

textarea { 
  resize: both; 
}

垂直方向にサイズ変更： 

textarea { 
  resize: vertical; 
}

水平方向にサイズ変更： 

textarea { 
  resize: horizontal; 
}

また、CSSまたはHTMLにwidthとheightが含まれていると、より広いブラウザサポートでテキストエリアのサイズを変更できなくなります。

5
Alireza

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

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

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

デモを見る

3
Oriol

textarea propertyを無効にするだけです。

textarea{
    resize: none;
}

vertical または horizo​​ntal のサイズ変更を無効にするには、

resize: vertical;

または

resize: horizontal;
3
Ashraful

@styleを使うと、それにカスタムサイズを与えて、サイズ変更機能(resize: none;)を無効にすることができます。

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
1
Carlos de Jesus Baez

これを試して：

#foo {
    resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>
1
Rafiqul Islam

resize cssプロパティを使用します。

textarea {
 resize:none;
}

すべてのtextareaのサイズ変更可能なプロパティを無効にします。

特定のテキストエリアを無効にするには、以下の手順を使用

ID textarea1のtextareaのサイズ変更可能なプロパティを無効にするには、このコードを使用します

#textarea1 {
 resize:none;
}

名前がtextareaname1のtextareaのサイズ変更可能なプロパティを無効にするには、このコードを使用します

textarea[name="textareaname1"] {
 resize:none;
}
0
Gokul Raj K.N.

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

.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>
0
Ambuj Khanna

すべてのテキストエリアのサイズ変更を無効にする

textarea {
    resize: none;
}

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

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

CSS

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

#noresize{
resize: none;
}
0
Abk

JQueryでも試すことができます

$('textarea').css("resize", "none");
0
Santosh Khalse

！importantを追加すると、機能します。

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

アウトラインは、特定のブラウザの青いアウトラインを避けるためのものです。

0
kaelds