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
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
<div class="page">
<div class="page">
<p>A few examples at what can be achieved with CSS and form text area's.</p>
<table>
<tbody>
<tr>
<td><p>Basic Text Area</p></td>
<td><textarea class="ta1" cols="20" name="ta1" rows="1"></textarea><br/><span id="chars1">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Background Color</p></td>
<td><textarea class="ta2" cols="20" name="ta2" rows="1"></textarea><br/><span id="chars2">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Border Color / Style</p></td>
<td><textarea class="ta3" cols="20" name="ta3" rows="1"></textarea><br/><span id="chars3">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Background Image</p></td>
<td><textarea class="ta4" cols="20" name="ta4" rows="1"></textarea><br/><span id="chars4">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Larger Side Border</p></td>
<td><textarea class="ta8" cols="20" name="ta8" rows="1"></textarea><br/><span id="chars8">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Rounded Corners</p></td>
<td><textarea class="ta5" cols="20" name="ta5" rows="1"></textarea><br/><span id="chars5">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Double Border</p></td>
<td><textarea class="ta6" cols="20" name="ta6" rows="1"></textarea><br/><span id="chars6">100</span> characters remaining</td>
</tr>
<tr class="odd">
<td><p>Gradient 1</p></td>
<td><textarea class="ta10" cols="20" name="ta10" rows="1"></textarea><br/><span id="chars10">100</span> characters remaining</td>
</tr>
<tr>
<td><p>Image in Text Area</p></td>
<td><textarea class="ta11" cols="20" name="ta11" rows="1"></textarea><br/><span id="chars11">100</span> characters remaining</td>
</tr>
</tbody></table>
<br /><br /><br /><br /><br />
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
/*
/*
// Few examples of textarea with text counter
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net
*/
@import url(http://fonts.googleapis.com/css?family=Audiowide);
body{
margin:auto 5%;
background:#272822;
font-family: 'Audiowide', sans-serif;
font-size:20px;
color:#fff;
}
span{
color:#CC3333;
font-size:15px;
}
table{
border:solid 5px #ccc;
}
table > tbody > tr > td{
padding:20px;
margin:15px;
font-size:15px;
}
table > tbody > tr > td:first-child{
color:#FF6600 ;
vertical-align: text-top;
font-size:15px;
}
/* Basic Text Area */
.ta1 {
width:230px;
height:60px;
}
/* Background Color */
.ta2 {
width:230px;
height:60px;
background-color:#99FFCC;
border:1px solid #008800;
}
/* Border Color / Style */
.ta3 {
width:230px;
height:60px;
border:2px dashed #D1C7AC;
}
/* Background Image */
.ta4 {
background-image: url(http://www.cssportal.com/form-elements/images/bg.png);
border: 1px solid #6297BC;
width: 230px;
height: 60px;
}
/* Larger Side Border */
.ta8 {
width: 230px;
height:60px;
border:1px solid #3366FF;
border-left: 4px solid #3366FF;
}
/* Rounded Corners */
.ta5 {
border: 2px solid #765942;
border-radius: 10px;
height: 60px;
width: 230px;
}
/* Double Border */
.ta6 {
border: 3px double #CCCCCC;
width: 230px;
height: 60px;
}
/* Gradient 1 */
.ta10 {
background-image:url(http://www.cssportal.com/form-elements/images/form_bg.jpg);
background-repeat:repeat-x;
border:1px solid #d1c7ac;
width: 230px;
height: 60px;
color:#333333;
padding:3px;
margin-right:4px;
margin-bottom:8px;
font-family:tahoma, arial, sans-serif;
}
/* Image in Text Area */
.ta11 {
background:#FFFFFF url(http://www.cssportal.com/form-elements/images/searchtext.png) no-repeat 85px 8px;
border: 1px solid #CCCCCC;
width: 230px;
height: 80px;
}
var maxLength = 100;
var maxLength = 100;
$('.ta1').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars1').text(length);
});
$('.ta2').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars2').text(length);
});
$('.ta3').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars3').text(length);
});
$('.ta4').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars4').text(length);
});
$('.ta8').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars8').text(length);
});
$('.ta5').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars5').text(length);
});
$('.ta6').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars6').text(length);
});
$('.ta10').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars10').text(length);
});
$('.ta11').keyup(function() {
var length = $(this).val().length;
var length = maxLength-length;
$('#chars11').text(length);
});