web-dev-qa-db-ja.com

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

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

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

とにかく、このサイズ変更ハンドルを非表示にする方法はありますか？

（「ハンドル」が正しいWordかどうかはわかりませんが、より良い用語を考えることはできません。）

safariwebkitcss3
95
david.mchonechase

CSSでサイズ変更の動作をオーバーライドできます。

textarea
{
   resize: none;
}

または単に

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

有効なプロパティは次のとおりです。両方、水平、垂直、なし

173
Tamas Czinege

次の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;
}

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

2
Gaurang P