如何移除<textarea>底部右下角的调整大小选项？

Question

我正在尝试去除位于右下角的 <textarea> 中的点。

这是一个例子（来自 Chrome）：
如何去除那些斜线？

- Jayaram

---

可能是如何禁用TextArea的可调整大小属性？的重复问题。 - RoToRa

Answer 1

只需在您的CSS文件中添加即可。

textarea { resize: none; }

后来（2019）编辑：

关于我这个问题的答案和越来越多的GitHub代码搜索结果，声明应用于元素的<code>resize: none</code>，我写了一些关于为什么我认为CSS上的resize:none对于用户体验是不好的：</p> <blockquote> <p>很多时候，textarea被限制在一定数量的行和列或者它有通过CSS定义的固定宽度和高度。仅基于我自己的经验，在回答论坛、编写网站上的联系表单、填写实时聊天弹出窗口甚至是Twitter上的私信时，这非常令人沮丧。</p> <p>有时候你需要打一个由许多段落组成的长回复，在一个小小的文本框内换行让人难以理解和跟踪，因为你在输入时不能直观地看到所有内容。有很多次我不得不在比如Notepad ++中写那段文字，然后将整个回复粘贴到那个小文本域中。我承认我也打开了DevTools，覆盖了resize：none的声明，但这并不是一种生产性的方法。</p> <p>来源：<a href="https://catalin.red/css-resize-none-is-bad-for-ux/" rel="noreferrer">https://catalin.red/css-resize-none-is-bad-for-ux/</a></p> </blockquote> 因此，在将上述内容添加到样式表中之前，您可能需要仔细考虑。

- Red

---

只是为了让大家知道，缩放是 CSS 3 的一个功能，不受 IE、Firefox 或 Chrome 的全面支持。 - S..

没错，这个方法可行，而且S..关于浏览器支持的说法是错误的。开玩笑！他在2012年发布的时候确实没有浏览器支持。大家要更注意帖子的日期哦。 - Braden Best

Answer 2

只需以下简单的代码即可。只需为文本区域设置样式resize：none

<textarea style="resize: none"></textarea>

- Asma Alfauri

---

然而图标被移除了，但调整大小也被禁用了。有没有一种方法可以将其移除，但仍然可以调整框的大小？ - Atousa Darabi

Answer 3

HTML

Sass

textarea {
  position: relative;
  z-index: 1;
  min-width: 1141px;
  min-height: 58px;
}

.resizer {
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    border-top: 8px solid #1c87c7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    bottom: 1px;
    right: -3px;
    pointer-events: none;
  }
}
.arrow-resizer-textarea {
  height: 0;
  width: 0;
  border-top: 8px solid #1c87c7;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  -webkit-transform: rotate(-45deg);
  position: absolute;
  bottom: 1px;
  right: -3px;
  pointer-events: none;
  z-index: 2;
}

- thirteen