Question

我不想完全关闭调整大小，但textareas上的调整大小句柄不适合页面样式的其余部分。有没有办法可以改变它的外观，也许用我自己的形象取而代之？对于不支持HTML5的浏览器，不必具有向后兼容性。

Answer 1

我通过将textarea包装在DIV中，然后将一个:: after元素放在包含符号的div中，并且与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/

Answer 2

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

http://jsfiddle.net/qw73n/

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

http://jsfiddle.net/q5kdr/

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

我担心唯一的选择是使用jQuery UI可调整大小：

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

Answer 3

这样做：

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

然后在图片集指针 - 事件：无，你完成了！就像指针完全忽略图像一样，事件也会发生在textarea本身。

干杯!!

注意：也许您必须使用resize：垂直于textarea，因为行为从浏览器更改为浏览器!!

见到这一点：https://jsfiddle.net/1bsoffu3/1/ a

Answer 4

这在浏览器中不可能。

我们必须在它上面添加一个元素并使用 pointer-event: none。由于浏览器在调整大小时以 内联样式 的像素设置 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 -->

HTML5 / CSS3 - 更改调整大小句柄的外观

4 个答案: