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

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 下强制使用不同的外观，你仍然可以获得调整大小手柄：

textarea {
  -webkit-appearance: none;
  appearance: none;
}

<textarea></textarea>

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

textarea {
  height: 100px;
  width: 300px;
  position: relative;
  background: #fff url("data:image/svg+xml,%3Csvg height='16' viewBox='0 0 8 8' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0v4l1.5-1.5 1.5 1.5 1-1-1.5-1.5 1.5-1.5zm5 4-1 1 1.5 1.5-1.5 1.5h4v-4l-1.5 1.5z'/%3E%3C/svg%3E") 100% 100% no-repeat;
}

<textarea></textarea>

但处理程序仍会出现在其顶部。

恐怕唯一的选择是使用 javascript。

Answer 3

这样做：

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

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

干杯！！

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

请参阅：https://jsfiddle.net/1bsoffu3/1/ a

Answer 4

这在浏览器中不可能。

---

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

这需要 JavaScript 或动态 CSS 变量之类的东西来读取元素的当前高度。修改是可行的，但通常会导致错位以及有趣且不受欢迎的视差效果。

---

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

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

---

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

---

上添加 ::after 规则，单击槽。当然，必须为此用途保留

---

，或者使用类。

、

和

元素的使用在这里并不重要，但它与元素之间的

---

用于调整大小手柄效果。我们还可以使用

---

! 以外的其他内容。

---

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