xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Section: Introduction -->4
<section class="">5
6
<p>7
Detailed documentation and more examples you can find in our8
<a href="https://mdbootstrap.com/docs/standard/extended/textarea/" target="_blank"><strong>Textarea Docs</strong></a>.9
</p>10
11
<hr class="mt-5">12
13
<p>Built with <a target="_blank" href="https://mdbootstrap.com/">Material Design for Bootstrap</a> - <strong>free</strong> and powerful Bootstrap UI KIT</p>14
15
<a class="btn btn-danger me-2" href="https://mdbootstrap.com/" target="_blank" role="button">Download MDB UI KIT</a>16
<a class="btn btn-dark me-2 px-3" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button"><i class="fab fa-github"></i></a>17
18
<hr class="mb-5"/>19
20
</section>21
<!-- Section: Introduction -->22
</div>23
24
<div class="container my-4">25
26
<p class="font-weight-bold">An example of bootstrap textarea style. Easy to implement and customize. Examples of basic and advanced usage.</p>27
28
<p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/forms/textarea/"29
target="_blank">Bootstrap Textarea Docs</a> </p>30
31
<hr>32
33
<p class="font-weight-bold">Basic example</p>34
35
<div class="row">36
<div class="col-md-6">37
38
<!--Title-->39
<h2 class="mb-4">40
Default textarea41
</h2>42
43
<!--Section: Live preview-->44
<section class="p-1">45
<!-- Grid row -->46
<div class="row">47
48
<!-- Grid column -->49
<div class="col-md-6">50
51
<div class="form-group mb-5">52
<label for="exampleFormControlTextarea1">Large textarea</label>53
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>54
</div>55
</div>56
<div class="col-md-6">57
58
<div class="form-group">59
<label for="exampleFormControlTextarea2">Small textarea</label>60
<textarea class="form-control rounded-0" id="exampleFormControlTextarea2" rows="3"></textarea>61
</div>62
63
</div>64
</div>65
<!-- Grid column -->66
</section>67
<!--Section: Live preview-->68
</div>69
70
<div class="col-md-6">71
72
<!--Title-->73
<h2 class="mb-4">74
Material textarea75
</h2>76
77
<!--Section: Live preview-->78
<section class="p-1">79
<!-- Grid row -->80
<div class="row">81
82
<!-- Grid column -->83
<div class="col-md-6">84
85
<!--Material textarea-->86
<div class="md-form">87
<textarea id="form7" class="md-textarea form-control" rows="3"></textarea>88
<label for="form7">Material textarea</label>89
</div>90
91
</div>92
<!-- Grid column -->93
94
<!-- Grid column -->95
<div class="col-md-6">96
97
<!--Textarea with icon prefix-->98
<div class="md-form">99
<i class="fas fa-pencil-alt prefix"></i>100
<textarea id="form10" class="md-textarea form-control" rows="3"></textarea>101
<label for="form10">Icon Prefix</label>102
</div>103
104
</div>105
<!-- Grid column -->106
107
</div>108
<!-- Grid row -->109
</section>110
<!--Section: Live preview-->111
</div>112
113
</div>114
115
<hr>116
117
<p class="font-weight-bold">More examples</p>118
119
<!--Textarea with icon prefix-->120
<div class="md-form mb-4 pink-textarea active-pink-textarea">121
<i class="fas fa-angle-double-right prefix"></i>122
<textarea id="form21" class="md-textarea form-control" rows="3"></textarea>123
<label for="form21">Material textarea with a colorful prefix on :focus state</label>124
</div>125
126
<!--Textarea with icon prefix-->127
<div class="md-form amber-textarea active-amber-textarea">128
<i class="fas fa-pencil-alt prefix"></i>129
<textarea id="form22" class="md-textarea form-control" rows="3"></textarea>130
<label for="form22">Material textarea with a colorful prefix on :focus state</label>131
</div>132
<!--Textarea with icon prefix-->133
<div class="md-form mb-4 pink-textarea active-pink-textarea-2">134
<i class="fas fa-angle-double-right prefix"></i>135
<textarea id="form23" class="md-textarea form-control" rows="3"></textarea>136
<label for="form23">Material textarea with an always colorful prefix</label>137
</div>138
139
<!--Textarea with icon prefix-->140
<div class="md-form amber-textarea active-amber-textarea-2">141
<i class="fas fa-pencil-alt prefix"></i>142
<textarea id="form24" class="md-textarea form-control" rows="3"></textarea>143
<label for="form24">Material textarea with an always colorful prefix</label>144
</div>145
146
</div>xxxxxxxxxx1
.active-pink-textarea.md-form label.active {2
color: #f48fb1;3
}4
.pink-textarea textarea.md-textarea:focus:not([readonly]) {5
border-bottom: 1px solid #f48fb1;6
box-shadow: 0 1px 0 0 #f48fb1;7
}8
.pink-textarea.md-form .prefix.active {9
color: #f48fb1;10
}11
.active-pink-textarea.md-form textarea.md-textarea:focus:not([readonly])+label {12
color: #f48fb1;13
}14
15
.active-amber-textarea.md-form label.active {16
color: #ffa000;17
}18
.amber-textarea textarea.md-textarea:focus:not([readonly]) {19
border-bottom: 1px solid #ffa000;20
box-shadow: 0 1px 0 0 #ffa000;21
}22
.amber-textarea.md-form .prefix.active {23
color: #ffa000;24
}25
.active-amber-textarea.md-form textarea.md-textarea:focus:not([readonly])+label {26
color: #ffa000;27
}28
29
.active-pink-textarea-2 textarea.md-textarea {30
border-bottom: 1px solid #f48fb1;31
box-shadow: 0 1px 0 0 #f48fb1;32
}33
.active-pink-textarea-2.md-form label.active {34
color: #f48fb1;35
}36
.active-pink-textarea-2.md-form label {37
color: #f48fb1;38
}39
.active-pink-textarea-2.md-form .prefix {40
color: #f48fb1;41
}42
.active-pink-textarea-2.md-form textarea.md-textarea:focus:not([readonly])+label {43
color: #f48fb1;44
}45
46
.active-amber-textarea-2 textarea.md-textarea {47
border-bottom: 1px solid #ffa000;48
box-shadow: 0 1px 0 0 #ffa000;49
}50
.active-amber-textarea-2.md-form label.active {51
color: #ffa000;52
}53
.active-amber-textarea-2.md-form label {54
color: #ffa000;55
}56
.active-amber-textarea-2.md-form .prefix {57
color: #ffa000;58
}59
.active-amber-textarea-2.md-form textarea.md-textarea:focus:not([readonly])+label {60
color: #ffa000;61
}1
1
Console errors: 0