web-dev-qa-db-ja.com

textareaのサイズ変更グラバーのスタイルを設定できますか？

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

cssresizetextarea
34
Azriel Omega

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

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

::-webkit-resizer {
  display: none;
}
<textarea></textarea>

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

This displays as follows in Chrome 26 on OS X:

注：display: noneを::-webkit-resizerに追加しても、実際にはユーザーがテキスト領域のサイズを変更できなくなるわけではなく、コントロールが非表示になるだけです。サイズ変更を無効にする場合は、resize CSSプロパティを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に次のように表示されます。

This displays as follows in Chrome 26 on OS X:

56
Anselm

CSSを::-webkit-resizer（Chrome 56またはFireFox 51では機能していないようです）に適用する代わりに、マークアップを使用して「カスタム」ハンドルを作成できます。グーグル検索後のこの例：

カスタムCSS3 TextAreaサイズ変更ハンドル

将来のリンク切れの場合のコピーされたマークアップ：

<div class="wrap">
  <div class="pull-tab"></div>
  <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

そして、例のCSS-もちろん、好きなスタイルを適用できます：

textarea {
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;
}
.wrap {
    position: relative;
    display: inline-block;
}
.wrap:after {
    content:"";
    border-top: 20px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    right: -18px;
    bottom: -3px;
    pointer-events: none;
}
.pull-tab {
    height: 0px;
    width: 0px;
    border-top: 20px solid cyan;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    position: absolute;
    bottom: 0px;
    right: -15px;
    pointer-events: none;
    z-index: 2;
}
16
HorusKol

この要素はブラウザ自体によってレンダリングされ、HTML仕様の一部ではありません。デザイナーが独自のブラウザーを作成していない限り、手に入るブラウザーで立ち往生しています。

9
Diodeus - James MacFarlane

背景画像だけを表示しないのはなぜですか？ http://jsfiddle.net/1n0d529p/

textarea {
  background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
  background-size: 12px;
}
1
csandreas1

私はこれをどうにかしてそうすることができました：

.textarea-container:before {
    content: '';
    background-image: url(svg/textarea-resize.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 2px;
    right: 0;
    pointer-events: none;
}
1
zyrup