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

Question

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

Answer 1

我通过将文本区域包装在 DIV 中，然后在该 div 中放置一个 ::after 元素来实现此目的，该元素包含一个符号并且具有与文本区域相同的背景颜色。

给 ::after 元素添加“pointer-events: none;”非常重要因为否则用户无法点击它。这适用于所有现代浏览器（http://caniuse.com/#feat=pointer-events）。

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

textarea {
  width: 100%;
  resize: vertical;
  background-color: #efefef;
  border: none;
  min-height: 100px;
}

.textarea_wrapper {
  position: relative;
}

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

<form action="/" method="post">
  <div class="textarea_wrapper">
    <textarea id="comment" cols="58" rows="10" tabindex="4"></textarea>
  </div>
</form>

Answer 2

这是一项艰难的任务。无法设计此特定控件的样式。即使你在 webkit 下强制使用不同的外观，你仍然会得到该死的调整大小手柄：

http://jsfiddle.net/qw73n/

但是，您可以解决这个问题，并将背景图像放置在左下角：

http://jsfiddle.net/q5kdr/

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

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

http://jqueryui.com/demos/ressized/

Answer 3

这样做：

将图像放置在默认手柄所在的右下角顶部！绝对位置等

然后在图片上设置指针事件：无，就完成了！这就像指针完全忽略图像并且事件在文本区域本身上进行。

干杯！！

注意：也许您必须使用 resize: 垂直于文本区域，因为行为会因浏览器而异！

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

a

Answer 4

跨浏览器不可能。

---

我们必须在其上添加一个元素并使用

pointer-event: none

。由于浏览器在调整大小时以

inline style

设置 div 像素高度，因此使用

position: absolute

或

position: fixed

将元素粘贴在其上是很困难的。因为我们的相对定位单元

vh vw rem em %

不知道最新的

height

值。

这需要JavaScript，或诸如动态 CSS 变量之类的东西来读取元素的当前高度。黑客攻击是可行的，但通常会导致错位，以及有趣和不需要的视差效果。

---

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

因为对眼睛有好处，我们可以使用水平线，即

<hr>

元素。这样可以保持级联效应。此示例将 ↕️ 设置为调整大小手柄，方法是在下一个

::after

上添加

<hr>

规则，单击槽。当然，必须为此用途保留

<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 -->