如何设置resizer样式(How to style resizers)

你知道textarea / div底角的那三行表明它可以调整大小吗？ 像这样的人 。 我想重新设置这个图标，以便我的div的resize功能更加明显。 也许是这样的。 如何在保留div的调整大小功能的同时删除这些行？

我试过谷歌搜索和搜索。 我发现最接近别人问同样问题的人是这个人， 但最好的答案建议完全关闭调整大小 ，这不是我想要的。

You know those three lines in the bottom corner of a textarea / div that indicate it can be resized? The ones like these. I want to restyle this icon so the resize functionality of my div is much more obvious. Perhaps something like this. How do I remove these lines while retaining the resize functionality of my div?

I've tried googling and searching SO. The closest I found to someone else asking the same question was this guy, but the best answer suggested turning off resize altogether, which is not what I want.

最满意答案

Obs：这个答案仅针对WebKit，找不到其他浏览器，也没有用他们的名字进行测试。

不是标准的CSS。 与滚动条一样，resizer小部件通常来自OS。 您可以使用自定义浏览器选择器设置样式，但这取决于浏览器。 Webkit可以通过使用:: - webkit-resizer选择器来做一些有限的样式。

textarea::-webkit-resizer {
  background-image: url(http://i.imgur.com/hQZDwHs.png);
}  
  
<textarea></textarea> 
  
 
 
 此外，您可以设置background-color 
 
 
 
  
  
textarea::-webkit-resizer {
  background-color: red;
}  
  
<textarea></textarea> 
  
 
 
 
 额外 
 
 
  您可以使用jQuery读取使用div的模拟帧大小调整行为，而无需使用jQuery UI post来模拟帧大小调整，这里您将有更多的可能性。  
  -moz-resizer resizer不适用于Firefox 46.0.1。 小提琴 。  
  所有（或大部分） Shadow DOM选择器 。  
Obs: This answer is for WebKit only, couldn't find for other browsers nor testing with their - names worked.
 
 
Not with standard css. The resizer widget, like scrollbars, is typically from OS. You may be able to style it with custom browser selectors, however, that depends on the browser. Webkit can do some limited styling by using the ::-webkit-resizer selector.
 
 
 
  
  
textarea::-webkit-resizer {
  background-image: url(http://i.imgur.com/hQZDwHs.png);
}  
  
<textarea></textarea> 
  
 
 
Also, you can set background-color
 
 
 
  
  
textarea::-webkit-resizer {
  background-color: red;
}  
  
<textarea></textarea> 
  
 
 
 
Extra
 
 
 You can read emulating frame-resize behavior with divs using jQuery without using jQuery UI post to emulate frame-resize, here you will have more possibilities. 
 -moz-resizer does not work on Firefox 46.0.1. Fiddle. 
 All (or most of) Shadow DOM selectors.