Removing the textarea border in HTML

HtmlCssTextareaBorder

Html Problem Overview


I'm working with the textarea element in HTML and want to remove the border of the box. I also want to align the text in the bottom of my textarea.

Html Solutions


Solution 1 - Html

textarea {
    border: none;
    outline: none;
}

Solution 2 - Html

In CSS:

  textarea { 
    border-style: none; 
    border-color: Transparent; 
    overflow: auto;        
  }

Solution 3 - Html

This one is great:

<style type="text/css">
textarea.test
{  
width: 100%;
height: 100%;
border-color: Transparent;     
}
</style>
<textarea class="test"></textarea>

Solution 4 - Html

textarea {
border: 0;
overflow: auto; }

less CSS ^ you can't align the text to the bottom unfortunately.

Solution 5 - Html

Also, you can remove the resize icon

textarea {resize:none;}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPROFESSORView Question on Stackoverflow
Solution 1 - HtmlJohn KugelmanView Answer on Stackoverflow
Solution 2 - HtmlJacobView Answer on Stackoverflow
Solution 3 - HtmlSilverHornView Answer on Stackoverflow
Solution 4 - HtmlmitchbrysonView Answer on Stackoverflow
Solution 5 - HtmlVitalicusView Answer on Stackoverflow