如何更改调整大小手柄的外观？

Posted 2023-05-07

【中文标题】如何更改调整大小手柄的外观？

【英文标题】：How can I change the look of resize handles?

【发布时间】：2011-12-01 23:33:17

【问题描述】：

我不想完全关闭调整大小，但是 textareas 上的调整大小手柄不适合页面样式的其余部分。有没有办法可以改变它的外观，也许用我自己的图像替换它？不支持 html5 的浏览器不必向后兼容。

【参考方案1】：

我通过将 textarea 包装在一个 DIV 中，然后在该 div 中放置一个 ::after 元素来做到这一点，该元素包含一个符号并具有与 textarea 相同的背景颜色。

赋予 ::after 元素“pointer-events: none;”很重要因为否则用户无法点击它。这适用于所有现代浏览器 (http://caniuse.com/#feat=pointer-events)。

.textarea_wrapper::after 
    pointer-events: none;
    content: "↓";
    font-size: 14px;
    position: absolute;
    height: 22px;
    width: 20px;
    text-align: center;
    bottom: 2px;
    right: -2px;
    background-color: #efefef;
    color: #777;

这是一个小提琴：http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

【讨论】：

此 hack 仅适用于右下角与原始调整器大小相同的调整器。

是的，它根本不会改变调整大小，它只是在上面放一个图像并允许点击这个图像。

这很难实现，因为调整大小操作将高度设置为像素。顺便说一句，使用固定位置或绝对位置可能会导致错位。

【参考方案2】：

这是一个艰难的过程。无法设置此特定控件的样式。即使您在 webkit 下强制使用不同的外观，您仍然可以获得该死的调整大小句柄：

http://jsfiddle.net/qw73n/

但是，您可以解决它并在左下角放置背景图像：

http://jsfiddle.net/q5kdr/

但是处理程序仍然会出现在它上面。

恐怕唯一的选择是使用可调整大小的 jQuery UI：

http://jqueryui.com/demos/resizable/

【讨论】：

如何使用 jQuery UI resizable 来改变外观/大小？我正在查看文档，但找不到它

【参考方案3】：

这样做：

在默认句柄所在的右下角顶部放置一个图像！位置绝对等。

然后在图片上设置指针事件：无，你就完成了！就像指针完全忽略了图像，事件发生在文本区域本身。

干杯！！

注意：也许你必须使用 resize:vertical to the textarea 因为浏览器之间的行为会发生变化！

看到这个：https://jsfiddle.net/1bsoffu3/1/a

【讨论】：

图片链接在小提琴中损坏

【参考方案4】：

这是跨浏览器不可能。

---

我们必须在它上面添加一个元素并使用pointer-event: none。因为浏览器在调整大小时以 内联样式 以像素为单位设置了 div 高度，因此使用 position: absolute 或 position: fixed 将元素粘贴在其上是很困难的。因为我们的相对定位单元vh vw rem em %不知道最新的height值。

这需要 javascript 或类似 动态 CSS 变量 来读取元素的当前高度。周围的黑客是可行的，但通常会导致错位，以及有趣和不受欢迎的视差效果。

---

或者，我们必须在 HTML 中添加额外的标记。

因为对眼睛有好处，我们可以使用水平线，<hr> 元素。这样就保持了级联效果。此示例将 ↕️ 设置为调整大小句柄，方法是在下一个 <hr> 上添加 ::after 规则，单击槽。当然<hr> 必须为这种用法保留，或者使用一个类。

<dd>、<dl> 和 <dt> 元素的使用在这里并不重要，但它是关于在元素之间使用 <hr> 来实现调整大小的手柄效果。我们也可以使用<hr>!以外的其他东西。

---

hr::after 
    content: "↕️";               /* We are not forced to use a character, this is just handy for the example. Also notice this particular character is one and half the width of a regular character, as you can see this comment gets a tiny bit misaligned. Hence, changing the char can render differently, you have to take that into account for all browsers */
    position: absolute;          /* Stick to the <hr> horizontal line */
    margin: -1.25em 0 0 calc(100% - 2.15em); /* You might have to adjust that a little depending your font-size and padding used in your page. The value of 2.2em correspond to two times the page padding, plus a little more corresponding of half the character width, so the character goes right over the resize handle. */
    font-size: x-large;         /* This set the size of the handle, and a nice alignment depends to it */
    pointer-events: none !important; /* Click trough. The !important rule avoid some blinking on the 2nd hovering. (Test it!) */


dd 
    resize: vertical;            /* Resize handle */
    overflow: auto;              /* Mandatory for the resize to work */
    height: 1.75em;              /* Notice the correspondonce to somewhat the height of one and half of a line, to maximize the effect. */


body 
    padding: 1em;                /* Notice the default page padding (or margin) of the document */
    filter: invert();            /* Cheap ass 1337 effect */
    background: black;           /* Just wanna underline that the character color gets inverted, and this can be adjusted by setting a hue filter rule */

<!-- The use of <dd>, <dl> and <dt> elements is NOT important here --> <dl><dt><b>Thematic break</b></dt><dd>The HTML <i>hr</i> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.</dd></dl>
<hr> <!-- <hr> between elements -->
     <dl><dt><b>Markup</b></dt><dd>Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.</dd></dl>
<hr> <!-- <hr> between elements -->
      <dl><dt><b>The Description Details element</b></dt><dd>The HTML dd element provides the description, definition, or value for the preceding term (dt) in a description list (dl).</dd></dl>
<hr> <!-- <hr> between elements -->