Question

通常情况下，textarea可以通过在右下角拖动一个小三角形手柄来调整两种方式。通过设置textarea { resize: vertical; }禁用水平调整大小后，textarea只能在拖动相同的小三角形手柄时向上或向下调整大小。但它似乎并不直观，因为三角形句柄表明我应该能够沿两个轴调整textarea的大小。

我注意到StackOverflow在这个textarea上有一个修改过的调整大小句柄我正在输入我的问题。它直观地暗示只有垂直调整大小，看起来很可爱。如果单击“提问”，您将在textarea框的底部看到它。我的猜测是使用jQuery进行修改。但是可以使用简单的CSS更改resize句柄的外观吗？

Answer 1

实际上，SO answer textarea的HTML部分是：

<div class="wmd-container">
    <div class="wmd-button-bar" id="wmd-button-bar"> .... </div>
    <textarea data-min-length="" tabindex="101" rows="15" cols="92" name="post-text" class="wmd-input processed" id="wmd-input"></textarea>
    <div class="grippie" style="margin-right: 0px;"></div>
</div>

div .grippie只是一个SVG图像，其处理程序设置为侦听您的点击和拖动动作，使用光标偏移高度来设置文本区域的高度。

如果您想了解更多信息，请查看this

我可以在CSS中更改textarea resize句柄的设计吗？

1 个答案: