I can make the background and borders (partially) of a textarea transparent by doing -

<textarea id="one" style="background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0)">
</textarea>

However, there is still a couple of slanting lines in the bottom right corner of the textarea which I cannot remove! Also, border of textarea reappears when textarea is in focus.

How can I make a perfectly transparent textarea?

I can make the background and borders (partially) of a textarea transparent by doing -

<textarea id="one" style="background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0)">
</textarea>

However, there is still a couple of slanting lines in the bottom right corner of the textarea which I cannot remove! Also, border of textarea reappears when textarea is in focus.

How can I make a perfectly transparent textarea?

• javascript
• jquery
• html
• css

2 Answers 2

Set the resize to none

<textarea id="one" style="resize: none;background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0)">
</textarea>

#one {
background: none;  // no bg means already transparent if no color wanted
border: none; // no border  , but if exist add !important to style
}

hi just make border to none and background to none rather then making rgba(0, 0, 0, 0).