EN
CSS - style textarea HTML element
0 points
In this article, we would like to show you how to style textarea HTML elements using CSS.
Quick solution:
xxxxxxxxxx1
textarea {2
background: yellow;3
}
In this example, we present how to use CSS type selector to style all textarea elements on the web page.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
textarea {7
background: #ffe973;8
border: 2px solid red;9
}10
11
</style>12
</head>13
<body>14
<textarea>Textarea 1 ...</textarea>15
<br>16
<textarea>Textarea 2 ...</textarea>17
</body>18
</html>In this section, we present advanced styling for textarea elements, :focus pseudo-class and ::placeholder pseudo-element.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
label.field {7
display: flex;8
}9
10
label.field + label.field {11
margin: 10px 0 0 0;12
}13
14
span.label {15
min-width: 80px;16
font: 13px/26px Arial;17
color: #5f6368;18
}19
20
textarea.input {21
padding: 3px 6px;22
outline: 0;23
border: 1px solid #e4e4e4;24
border-radius: 3px;25
background: #ffffff;26
flex: 1;27
min-height: 3rem;28
font: 13px Arial;29
color: #495057;30
resize: vertical;31
}32
33
/* scrollbar style solution is available here: */34
/* https://dirask.com/posts/CSS-set-scrollbar-colors-j89R91 */35
36
textarea.input:focus {37
border-color: #80bdff;38
}39
40
textarea.input::placeholder { /* placeholder legacy solution is available here: */41
color: #c0c0c0; /* https://dirask.com/posts/CSS-change-input-s-placeholder-color-DdZoKj */42
}43
44
</style>45
</head>46
<body>47
<label class="field">48
<span class="label">About me:</span>49
<textarea class="input" name="user-about" placeholder="Describe yourself ..."></textarea>50
</label>51
<label class="field">52
<span class="label">My skills:</span>53
<textarea class="input" name="user-skills" placeholder="Describe your skills ..."></textarea>54
</label>55
</body>56
</html>
