当前位置：文江博客话题详情

如何删除右下角的调整大小选项？

发布于 2024-11-15 10:55:52 字数 245 浏览 5 评论 0原文

我正在尝试删除右下角的 </code> 中的点。

以下是我的意思的示例（来自 Chrome）：

如何去掉那些对角线？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

睫毛上残留的泪 2024-11-22 10:55:52

只需在您的 CSS 文件中添加

textarea { resize: none; }

稍后（2019）编辑：
与我的这个答案以及应用于 textarea 元素的 resize: none 声明相关的 GitHub 代码搜索结果数量不断增加，我写了一些行来解释为什么我认为 CSS resize none textarea 对用户体验不利：

通常，文本区域仅限于行数和列数，或者具有通过 CSS 定义的固定宽度和高度。仅根据我自己的经验，在论坛上回复、在网站上填写联系表格、填写实时聊天弹出窗口甚至在 Twitter 上发送私人消息时，这非常令人沮丧。
有时您需要输入由许多段落组成的长回复，并且将该文本包装在一个很小的文本区域框中，这使得您在输入时难以理解和遵循。有很多次，我不得不在 Notepad++ 中编写该文本，然后将整个回复粘贴到那个小文本区域中。我承认我还打开了 DevTools 来覆盖 resize: none 声明，但这并不是真正有效的做事方式。
来自 https://catalin.red/css-resize-没有一个对 ux 来说是坏的/

因此，在将上述内容添加到样式表之前，您可能需要检查一下。

Just add in your CSS file

textarea { resize: none; }

Later (2019) edit:
Related to this answer of mine and the rising number of GitHub code search results on resize: none declarations applied to textarea elements, I wrote some lines on why I think CSS resize none on textarea is bad for UX:

Very often, the textarea is limited to a number of rows and columns or it has fixed width and height defined via CSS. Based solely on my own experience, while answering to forums, writing contact forms on websites, filling live chat popups or even private messaging on Twitter this is very frustrating.
Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.
from https://catalin.red/css-resize-none-is-bad-for-ux/

So you might want to check this out before adding the above to your stylesheets.

回复收藏 0 原文

爱冒险 2024-11-22 10:55:52

就像下面的代码一样简单。只需给文本区域设置样式resize: none

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

It is as simple as the following code. Just give the textarea the style resize: none

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

回复收藏 0 原文

空城仅有旧梦在 2024-11-22 10:55:52

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

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

回复收藏 0 原文

是伱的 2024-11-22 10:55:52

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

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

回复收藏 0 原文

~没有更多了~