css - テキストエリアのサイズ変更グラバーのスタイルを設定できますか?

Question

私のデザイナーは、スタイル付きのサイズ変更グラバーを備えたテキスト領域を持つデザインを私にくれました。問題は、スタイルを設定できるかどうかです。

Answer 1

::-webkit-resizerWebKit は、要素の右下に自動的に追加するサイズ変更コントロールの疑似要素を提供しますtextarea。

display: noneまたはを適用することで非表示にすることができます-webkit-appearance: none。

::-webkit-resizer {
  display: none;
}

<textarea></textarea>

これは、OS X の Chrome 26 では次のように表示されます。

注: to を追加display: noneし::-webkit-resizerても、実際にはユーザーがテキストエリアのサイズを変更できなくなるわけではなく、コントロールが非表示になるだけです。サイズ変更を無効にする場合は、resizeCSS プロパティをに設定しnoneます。これにより、コントロールも非表示になり、テキスト領域のサイズ変更をサポートするすべてのブラウザーで機能するという利点が追加されます。

::-webkit-resizer疑似要素では、いくつかの基本的なスタイリングも可能です。サイズ変更コントロールでより多くの色を使用できると思われる場合は、次のように追加できます。

::-webkit-resizer {
  border: 2px solid black;
  background: red;
  box-shadow: 0 0 5px 5px blue;
  outline: 2px solid yellow;
}

<textarea></textarea>

これは、OS X の Chrome 26 では次のように表示されます。