A few examples at what can be achieved with CSS and form text area's.

 

Text Area Examples Code

Basic Text Area

/* Basic Text Area */
.ta1 {
	No code needed for this text box!
}

Background Color

/* Background Color */
.ta2 {
	width:230px;
	height:60px;
	background-color:#99FFCC;
	border:1px solid #008800;
}

Border Color / Style

/* Border Color / Style */
.ta3 {
	width:230px;
	height:60px;
	border:2px dashed #D1C7AC;
}

Background Image

/* Background Image */
.ta4 {
	background-image: url(images/bg.png);
	border: 1px solid #6297BC;
	width: 230px;
	height: 60px;
}

Right click to Save Images

Image

Larger Side Border

/* Larger Side Border */
.ta8 {
	width: 230px;
	height:60px;
	border:1px solid #3366FF;
	border-left: 4px solid #3366FF;
}

Rounded Corners

/* Rounded Corners */
.ta5 {
	border: 2px solid #765942;
	border-radius: 10px;
	height: 60px;
	width: 230px;
}

Double Border

/* Double Border */
.ta6 {
	border: 3px double #CCCCCC;
	width: 230px;
	height: 60px;
}

Gradient 1

/* Gradient 1 */
.ta10 {
	background-image:url(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;

}

Right click to Save Images

Image

Image in Text Area

/* Image in Text Area */
.ta11 {
	background:#FFFFFF url(images/searchtext.png) no-repeat 85px 8px;
	border: 1px solid #CCCCCC;
	width: 230px;
	height: 80px;
}

Right click to Save Images

Image


Last updated on 6th April 2014 By Rene Spronk