如何设置大小调整器的样式

Posted 2023-05-07

【中文标题】如何设置大小调整器的样式

【英文标题】：How to style resizers

【发布时间】：2016-09-21 22:53:00

【问题描述】：

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

我尝试过谷歌搜索和搜索。我发现问同样问题的人最接近的是这个人，but the best answer suggested turning off resize altogether，这不是我想要的。

【问题讨论】：

好吧，如果你隐藏这些行，textarea 无论如何都无法调整大小，所以我不明白你为什么要隐藏它们并保持 textarea 可调整大小

我的应用中有一个 div，我想调整其大小。但我想要比底角那些难以看到的线条更好的东西，让用户清楚地知道这是一个可调整大小的 div。 div 是黑色的，这使得线条很难看到。

也许你是说这不可能？ :o

【参考方案1】：

Obs：此答案仅适用于 WebKit，无法找到其他浏览器，也无法使用它们的名称进行测试。

---

不适用于标准 css。缩放器小部件，如滚动条，通常来自操作系统。您可以使用自定义浏览器选择器对其进行样式设置，但这取决于浏览器。 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>

---

额外

你可以阅读emulating frame-resize behavior with divs using jQuery without using jQuery UI 的帖子来模拟帧调整大小，在这里你 会有更多的可能性。 -moz-resizer 不适用于 Firefox 46.0.1。 Fiddle。 所有（或大部分）Shadow DOM selectors。

【讨论】：

这就是我要找的！我已经知道如何重新设置滚动条的样式，并希望大小调整器也有类似的东西。

@Gaweyne 请注意，webkit 可以在 Chrome 上运行，但不能在 Firefox 上运行（如果你关心的话）。

@Gaweyne -moz-resizer 不适用于 Firefox 46.0.1。 jsfiddle.net/04hzbf16

【参考方案2】：

您可以将 textarea 设置为自动调整大小并删除调整大小处理程序：按照此处的说明进行操作：

https://css-tricks.com/examples/TextareaTricks/

请注意，此图标由浏览器生成，不是 html 规范的一部分。所以你可以隐藏或显示它，但你不能改变它的外观。

希望对你有帮助。

【讨论】：

nanilab 的回答显示了您实际上如何重新设置此图标的样式，就像滚动条一样。

@Gaweyne 但仅适用于 webkit :)

是的，但 Internet Explorer 输了。我们实际上拒绝在我们的应用程序中支持 Internet Explorer。 ^_^

@Gaweyne 我用 FF :)

数百万人仍在使用 Internet Explorer。如果解决方案不是跨浏览器，则不考虑解决方案。

【参考方案3】：

html

<div class="form-group resizer">
                <div class="arrow-resizer-textarea"></div>
                <textarea id="mytextArea" class="form-control" placeholder="text here....."></textarea>
            </div>

sass

textarea 
  position: relative;
  z-index: 1;
  min-width: 1141px;
  min-height: 58px;


.resizer 
  position: relative;
  display: inline-block;
  &:after 
    content: "";
    border-top: 8px solid #1c87c7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    bottom: 1px;
    right: -3px;
    pointer-events: none;
  

.arrow-resizer-textarea 
  height: 0;
  width: 0;
  border-top: 8px solid #1c87c7;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  -webkit-transform: rotate(-45deg);
  position: absolute;
  bottom: 1px;
  right: -3px;
  pointer-events: none;
  z-index: 2;