我可以设置 textarea 的调整大小抓取器的样式吗？

Posted 2023-05-07

【中文标题】我可以设置 textarea 的调整大小抓取器的样式吗？

【英文标题】：Can I style the resize grabber of textarea?

【发布时间】：2012-10-19 01:54:45

【问题描述】：

我的设计师刚刚给了我带有样式调整大小抓取器的文本区域的设计。问题是：我可以设计它吗？

【问题讨论】：

调整大小抓取器是way too small on 4K monitors。

【参考方案1】：

WebKit 为它自动添加到textarea 元素右下角的调整大小控件提供了伪元素::-webkit-resizer。

可以通过应用display: none或-webkit-appearance: none来隐藏：

::-webkit-resizer 
  display: none;

<textarea></textarea>

这在 OS X 上的 Chrome 26 中显示如下：

注意：将display: none 添加到::-webkit-resizer 实际上并不能阻止用户调整文本区域的大小，它只是隐藏了控件。如果要禁用调整大小，请将resize CSS 属性设置为none。这也隐藏了控件，并具有在支持调整文本区域大小的所有浏览器中工作的额外好处。

::-webkit-resizer 伪元素还允许一些基本样式。如果您认为调整大小控件可以使用更多颜色，您可以添加以下内容：

::-webkit-resizer 
  border: 2px solid black;
  background: red;
  box-shadow: 0 0 5px 5px blue;
  outline: 2px solid yellow;

<textarea></textarea>

这在 OS X 上的 Chrome 26 中显示如下：

【讨论】：

更好的例子：::-webkit-resizer border: 9px solid rgba(0,0,0,.1); border-bottom-color: rgba(0,0,0,.5); border-right-color: rgba(0,0,0,.5); outline: 1px solid rgba(0,0,0,.2); box-shadow: 0 0 5px 3px rgba(0,0,0,.1)

你好，我可以把调整器放在右上角吗？

来源：tjvantoll.com/2013/04/15/…

2018 年 3 月：适用于 Safari 的当前主流版本，不适用于 MacOS 上 Chrome 的当前主流版本

【参考方案2】：

您可以使用一些标记创建“自定义”句柄，而不是将 CSS 应用到 ::-webkit-resizer（这在 Chrome 56 或 FireFox 51 中似乎不起作用）。我在谷歌搜索后找到了这个例子：

Custom CSS3 TextArea Resize Handle

复制标记以防将来出现死链接：

<div class="wrap">
  <div class="pull-tab"></div>
  <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

还有示例中的 CSS - 当然，您可以应用任何您喜欢的样式：

textarea 
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;

.wrap 
    position: relative;
    display: inline-block;

.wrap:after 
    content:"";
    border-top: 20px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    right: -18px;
    bottom: -3px;
    pointer-events: none;

.pull-tab 
    height: 0px;
    width: 0px;
    border-top: 20px solid cyan;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    position: absolute;
    bottom: 0px;
    right: -15px;
    pointer-events: none;
    z-index: 2;

【参考方案3】：

textarea::-webkit-resizer 
  border-width: 8px;
  border-style: solid;
  border-color: transparent orangered orangered transparent;

<textarea/>

【参考方案4】：

为什么不只显示背景图片？ http://jsfiddle.net/1n0d529p/

textarea 
  background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
  background-size: 12px;

【讨论】：

你的问题的答案是当滚动条出现时图像消失了。

【参考方案5】：

我设法这样做了：

.textarea-container:before 
    content: '';
    background-image: url(svg/textarea-resize.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 2px;
    right: 0;
    pointer-events: none;

【参考方案6】：

使用@HorusKol 的方法为textarea 的resize 抓取器设置样式

Codepen url

textarea 
    /* Ignore this part of code - basic textarea formatting */
    margin-top: 20px;
    margin-left: 20px;
    width:300px;
    padding:20px;
    border:1px solid #CCC;
    border-radius: 4px;
    /* Comment below line to resize horizontal + vertical */
    resize:vertical 
    /* Step 1 */
    position: relative;

    /* Step 2 */
.wrap 
    position: relative;
    display: inline-block;

    /* Step 3 - - Sets the 1st line of resize icon */
.wrap:after 
    content:"";
    border-top: 2px solid #555;
    width:16px;
    transform: rotate(-45deg);
    background:transparent;
    position: absolute;
    right: 1px;
    bottom: 14px;
    pointer-events: none;
    border-radius:25%;

    /* Step 4 - Sets the 2nd line of resize icon */
.pull-tab 
    border-top: 2px solid #555;
    width:10px;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 10px;
    right: 1px;
    pointer-events: none;
    border-radius:25%;

    /* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer
  display:none;

<div class="wrap">
    <div class="pull-tab"></div>
    <textarea placeholder="Customized resizer grabber...">
    </textarea>
</div>