I'm trying to remove dots in a textarea
which are present at the bottom-right corner.
Here's an example of what I mean (from Chrome):
How to remove those diagonal lines?
You can set the size of a text area using the cols and rows attributes. To limit the number of characters entered in a textarea, use the maxlength attribute. The value if the attribute is in number. Specifies that on page load the text area should automatically get focus.
You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With