Las áreas de texto por defecto de HTML son un poco feas. Veamos un ejemplo:
<form>
<textarea>Regular textarea</textarea>
</form>Vamos a ponerla un poco más bonita con CSS y un poquito de HTML.
<style>
body {
background: #222;
}
.custom {
font-family: monospace;
width: 480px;
height: 220px;
padding: 24px 30px;
box-sizing: border-box;
border: 2px solid #222;
border-radius: 10px;
background-color: #555;
font-size: 24px;
resize: none;
color: #06ffa3;
margin: 20px;
line-height: 50px;
}
.custom::placeholder {
color: #06ffa3;
}
</style>
<form>
<textarea class="custom" placeholder="Custom Textarea"></textarea>
</form>HTML
<form>
<textarea class="custom" placeholder="Custom Textarea...">Custom Textarea...</textarea>
</form>CSS
.custom::placeholder {
color: #06ffa3;
}
.custom {
width: 680px;
height: 250px;
padding: 44px 30px;
box-sizing: border-box;
border: 2px solid #222;
border-radius: 20px;
background-color: #555;
font-size: 44px;
resize: none;
color: #06ffa3;
margin-top: 140px;
line-height: 50px;
}