我能否对文本区域的调整大小控制器进行样式美化？

Question

我的设计师给了我一份带有样式调整手柄的文本区域设计。问题是：我能否对其进行样式设置？

- Azriel Omega

---

那个调整大小的抓手在4K显示器上太小了。 - Lonnie Best

Answer 1

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

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

::-webkit-resizer {
  display: none;
}

<textarea></textarea>

在 Mac 上，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>

在 Mac OS X 上，在 Chrome 26 中，该内容显示如下：

- Anselm

---

更好的例子：::-webkit-resizer{ 边框: 9像素 实线 rgba(0,0,0,.1); 底部边框颜色: rgba(0,0,0,.5); 右侧边框颜色: rgba(0,0,0,.5); 轮廓线: 1像素 实线 rgba(0,0,0,.2); 盒子阴影: 0 0 5像素 3像素 rgba(0,0,0,.1) } - Anselm

你好，我能把调整大小器放在右上角吗？ - Preethi

伪元素列表以样式化表单控件：http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/ - Anselm

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

在Firefox上无法工作，有什么解决办法吗？ - Bhavin

Answer 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;
}

- HorusKol

Answer 3

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

<textarea/>

- Rich

Answer 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;
}

- csandreas1

---

你的问题的答案是，当滚动条出现时，图像会消失。 - ztaff

现在更新你的fiddle，似乎使用的背景图片出现了404错误。 - Bhavin

Answer 5

使用@HorusKol的方法来样式化文本区域的调整大小抓手。

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>

- Aadesh

Answer 6

我这样做成功了：

.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;
}

- zyrup

---

输入元素不支持伪代码 https://stackoverflow.com/questions/3286991/can-a-before-selector-be-used-with-a-textarea - undefined

@Sethuraman 这是用于父级元素的。例如，<div class="textarea-container"><textarea /></div>。 - undefined

Answer 7

textarea {
  resize: none;
}

<textarea cols="72" rows="14"></textarea>

- saelozahra

---

我认为原帖的问题是如何更改“调整大小抓手”的样式，而不是如何删除它。你的代码只是删除了调整大小功能。 - frzsombor