Ajax Loader
×

Few examples of textarea with text counter

A few examples at what can be achieved with CSS and form text area's and the counter part is achieved with jQuery.

Thanks Pawan Mall

HTML
<div class="page">
1
<div class="page">
2
<p>A few examples at what can be achieved with CSS and form text area's.</p>
3
  <table>
4
<tbody>
5
<tr>
6
  <td><p>Basic Text Area</p></td>
7
  <td><textarea class="ta1" cols="20" name="ta1" rows="1"></textarea><br/><span id="chars1">100</span> characters remaining</td>
8
</tr>
9
 
10
  <tr>
11
  <td><p>Background Color</p></td>
12
  <td><textarea class="ta2" cols="20" name="ta2" rows="1"></textarea><br/><span id="chars2">100</span> characters remaining</td>
13
  </tr>
14
<tr>
15
  <td><p>Border Color / Style</p></td>
16
  <td><textarea class="ta3" cols="20" name="ta3" rows="1"></textarea><br/><span id="chars3">100</span> characters remaining</td>
17
</tr>
18
 
19
<tr>
20
  <td><p>Background Image</p></td>
21
  <td><textarea class="ta4" cols="20" name="ta4" rows="1"></textarea><br/><span id="chars4">100</span> characters remaining</td>
22
</tr>
23
 
24
<tr>
25
  <td><p>Larger Side Border</p></td>
26
  <td><textarea class="ta8" cols="20" name="ta8" rows="1"></textarea><br/><span id="chars8">100</span> characters remaining</td>
27
</tr>
28
 
29
<tr>
30
  <td><p>Rounded Corners</p></td>
31
  <td><textarea class="ta5" cols="20" name="ta5" rows="1"></textarea><br/><span id="chars5">100</span> characters remaining</td>
32
</tr>
33
  
34
<tr>
35
  <td><p>Double Border</p></td>
36
  <td><textarea class="ta6" cols="20" name="ta6" rows="1"></textarea><br/><span id="chars6">100</span> characters remaining</td>
37
  
38
</tr>
39
 
40
<tr class="odd">
41
  <td><p>Gradient 1</p></td>
42
  <td><textarea class="ta10" cols="20" name="ta10" rows="1"></textarea><br/><span id="chars10">100</span> characters remaining</td>
43
  
44
</tr>
45
 
46
<tr>
47
  <td><p>Image in Text Area</p></td>
48
  <td><textarea class="ta11" cols="20" name="ta11" rows="1"></textarea><br/><span id="chars11">100</span> characters remaining</td>
49
  
50
</tr>
51
 
52
</tbody></table>
53
  <br /><br /><br /><br /><br />
54
  
55
  
56
  
57
  
58
  
59
 
60
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
/* 
1
/* 
2
// Few examples of textarea with text counter
3
// Made with ❤ by @Pawan_Mall
4
// http://www.pawanmall.net 
5
*/
6
@import url(http://fonts.googleapis.com/css?family=Audiowide);
7
body{
8
  margin:auto 5%;
9
  background:#272822;
10
  font-family: 'Audiowide', sans-serif;
11
  font-size:20px;
12
  color:#fff;
13
}
14
span{
15
  color:#CC3333;
16
  font-size:15px;
17
}
18
table{
19
  border:solid 5px #ccc;
20
}
21
table > tbody > tr > td{
22
  padding:20px;
23
  margin:15px;
24
  font-size:15px;
25
}
26
table > tbody > tr > td:first-child{
27
  color:#FF6600 ;
28
  vertical-align: text-top;
29
  font-size:15px;
30
}
31
/* Basic Text Area */
32
.ta1 {
33
  width:230px;
34
  height:60px;
35
}
36
 
37
/* Background Color */
38
.ta2 {
39
  width:230px;
40
  height:60px;
41
  background-color:#99FFCC;
42
  border:1px solid #008800;
43
}
44
 
45
/* Border Color / Style */
46
.ta3 {
47
  width:230px;
48
  height:60px;
49
  border:2px dashed #D1C7AC;
50
}
51
 
52
/* Background Image */
53
.ta4 {
54
  background-image: url(http://www.cssportal.com/form-elements/images/bg.png);
55
  border: 1px solid #6297BC;
56
  width: 230px;
57
  height: 60px;
58
}
59
 
60
/* Larger Side Border */
61
.ta8 {
62
  width: 230px;
63
  height:60px;
64
  border:1px solid #3366FF;
65
  border-left: 4px solid #3366FF;
66
}
67
 
68
/* Rounded Corners */
69
.ta5 {
70
  border: 2px solid #765942;
71
  border-radius: 10px;
72
  height: 60px;
73
  width: 230px;
74
}
75
 
76
/* Double Border */
77
.ta6 {
78
  border: 3px double #CCCCCC;
79
  width: 230px;
80
  height: 60px;
81
}
82
 
83
/* Gradient 1 */
84
.ta10 {
85
  background-image:url(http://www.cssportal.com/form-elements/images/form_bg.jpg);
86
  background-repeat:repeat-x;
87
  border:1px solid #d1c7ac;
88
  width: 230px;
89
  height: 60px;
90
  color:#333333;
91
  padding:3px;
92
  margin-right:4px;
93
  margin-bottom:8px;
94
  font-family:tahoma, arial, sans-serif;
95
 
96
}
97
 
98
/* Image in Text Area */
99
.ta11 {
100
  background:#FFFFFF url(http://www.cssportal.com/form-elements/images/searchtext.png) no-repeat 85px 8px;
101
  border: 1px solid #CCCCCC;
102
  width: 230px;
103
  height: 80px;
104
}
 
JavaScript
var maxLength = 100;
1
var maxLength = 100;
2
$('.ta1').keyup(function() {
3
  var length = $(this).val().length;
4
  var length = maxLength-length;
5
  $('#chars1').text(length);  
6
});
7
$('.ta2').keyup(function() {
8
  var length = $(this).val().length;
9
  var length = maxLength-length;
10
  $('#chars2').text(length);  
11
});
12
$('.ta3').keyup(function() {
13
  var length = $(this).val().length;
14
  var length = maxLength-length;
15
  $('#chars3').text(length);  
16
});
17
$('.ta4').keyup(function() {
18
  var length = $(this).val().length;
19
  var length = maxLength-length;
20
  $('#chars4').text(length);  
21
});
22
$('.ta8').keyup(function() {
23
  var length = $(this).val().length;
24
  var length = maxLength-length;
25
  $('#chars8').text(length);  
26
});
27
$('.ta5').keyup(function() {
28
  var length = $(this).val().length;
29
  var length = maxLength-length;
30
  $('#chars5').text(length);  
31
});
32
$('.ta6').keyup(function() {
33
  var length = $(this).val().length;
34
  var length = maxLength-length;
35
  $('#chars6').text(length);  
36
});
37
$('.ta10').keyup(function() {
38
  var length = $(this).val().length;
39
  var length = maxLength-length;
40
  $('#chars10').text(length);  
41
});
42
$('.ta11').keyup(function() {
43
  var length = $(this).val().length;
44
  var length = maxLength-length;
45
  $('#chars11').text(length);  
46
});
47
 
48
 
49
 
50
 
51
 
 

Few examples of textarea with text counter

CSSDeck G+