Safariでテキストエリアのサイズ変更ハンドルを非表示にする

Question

アプリケーションで textarea コンポーネントを使用しており、その高さを動的に制御しています。ユーザーが入力すると、十分なテキストが存在するたびに高さが増加します。これは IE、Firefox、Safari では正常に動作します。

ただし、Safari では、右下に「ハンドル」ツールがあり、クリックしてドラッグすることでテキストエリアのサイズを変更できます。私は、stackoverflow の「質問する」ページのテキストエリアにもこの問題があることに気付きました。このツールはわかりにくく、基本的に邪魔です。

それで、このサイズ変更ハンドルを非表示にする方法はありますか?

(「ハンドル」という言葉が正しいかどうかはわかりませんが、これより適切な言葉が思いつきません。)

Answer 1

あなたはCSSでサイズ変更動作をオーバーライドすることができます：

textarea
{
   resize: none;
}

または単に

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

有効な特性がある：両方の、水平、垂直、なし

Answer 2

すべてのユーザーに対してこの動作を無効にするには、次の 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;
}

これは、サイズ変更ハンドルを追加する WebKit ベースのブラウザ (つまり、Safari や Chrome) にのみ関係することに注意してください。 TextArea コントロール。

Answer 3

サファリ最大高さ最大幅機会もFirefoxの4.0（b3pre）で動作します。道によってここに良い例： http://www.alanedwardes.com/ポスト/サファリ - と - サイズ変更可能な-テキストボックス/ の