CSS 我可以设置 textarea 的调整大小抓取器的样式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13126917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I style the resize grabber of textarea?
提问by Azriel Omega
My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?
我的设计师刚刚给了我带有样式调整大小抓取器的文本区域的设计。问题是：我可以设计它吗？
回答by Anselm
WebKit provides the pseudo-element ::-webkit-resizerfor the resize control it automatically adds to the bottom right of textareaelements.
WebKit 为::-webkit-resizer它自动添加到textarea元素右下角的调整大小控件提供了伪元素。
It can be hidden by applying display: noneor -webkit-appearance: none:
它可以通过应用display: none或隐藏-webkit-appearance: none：
::-webkit-resizer {
display: none;
}<textarea></textarea>This displays as follows in Chrome 26 on OS X:
这在 OS X 上的 Chrome 26 中显示如下：
Note: Adding display: noneto ::-webkit-resizerdoesn't actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resizeCSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.
注意：添加display: none到::-webkit-resizer实际上并没有阻止用户调整文本区域的大小，它只是隐藏了控件。如果要禁用调整大小，请将resizeCSS 属性设置为none。这也隐藏了控件并具有在支持调整文本区域大小的所有浏览器中工作的额外好处。
The ::-webkit-resizerpseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:
该::-webkit-resizer伪元素也允许一些基本的造型。如果您认为调整大小控件可以使用更多颜色，您可以添加以下内容：
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}<textarea></textarea>This displays as follows in Chrome 26 on OS X:
这在 OS X 上的 Chrome 26 中显示如下：
回答by HorusKol
Instead of applying CSS to ::-webkit-resizer(which doesn't appear to be working in Chrome 56 or FireFox 51), you can create a "custom" handle using some markup. I found this example after a google search:
::-webkit-resizer您可以使用一些标记创建一个“自定义”句柄，而不是将 CSS 应用于（在 Chrome 56 或 FireFox 51 中似乎不起作用）。我在谷歌搜索后找到了这个例子：
Custom CSS3 TextArea Resize Handle
Copied markup in case of future dead link:
复制标记以防将来出现死链接：
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
And the CSS from the example - of course, you can apply any style you like :
以及示例中的 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;
}
回答by csandreas1
Why not just show a background image? http://jsfiddle.net/1n0d529p/
为什么不只显示背景图像？ 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;
}
回答by zyrup
I managed to do so this way:
我设法这样做：
.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;
}
