如何删除存在于 textarea 右下角的点?HTML
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6340545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove dots present at the right bottom-corner of the textarea ? HTML
提问by Jayaram
回答by Red
Just add in your CSS
file
只需添加到您的CSS
文件中
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:
稍后(2019 年)编辑:与我的这个答案以及resize: none
适用于textarea
元素的声明的 GitHub 代码搜索结果数量不断增加有关,我写了一些关于为什么我认为 CSS resize none ontextarea
对 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.
很多时候,textarea 仅限于许多行和列,或者它具有通过 CSS 定义的固定宽度和高度。仅根据我自己的经验,在回答论坛、在网站上编写联系表格、填写实时聊天弹出窗口甚至在 Twitter 上发送私人消息时,这非常令人沮丧。
有时您需要输入一个由许多段落组成的长回复,并将该文本包装在一个很小的 textarea 框中,这会使您在输入时难以理解和理解。例如,有很多次我不得不在 Notepad++ 中编写该文本,然后将整个回复粘贴到那个小文本区域中。我承认我也打开了 DevTools 来覆盖 resize: none 声明,但这并不是真正有效的做事方式。
So you might want to check this out before adding the above to your stylesheets.
因此,在将上述内容添加到样式表之前,您可能需要检查一下。
回答by thirteen
html
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;
}
回答by Asma Alfauri
as simple as the following code in html just give the text area css style resize
<textarea style="resize: none"></textarea>