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

 

Text Box Examples Code

Basic Text Box

/* Basic Text Box */
.tb1 {
	No code needed for this text box!
}

Background Color

/* Background Color */
.tb2 {
	background-color : #99FFCC;
	border: 1px solid #008000;
	width: 230px;
}

Border Color / Style

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

Background Image

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

Right click to Save Images

Image 1

Larger Side Border

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

Rounded Corners

/* Rounded Corner */
.tb5 {
	border:2px solid #456879;
	border-radius:10px;
	height: 22px;
	width: 230px;
}

Double Border

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

Gradient 1

/* Gradient 1 */
.tb10 {
	background-image:url(images/form_bg.jpg);
	background-repeat:repeat-x;
	border:1px solid #d1c7ac;
	width: 230px;
	color:#333333;
	padding:3px;
	margin-right:4px;
	margin-bottom:8px;
	font-family:tahoma, arial, sans-serif;
}

Right click to Save Images

Image 1

Gradient 2

/* Gradient 2 */
.tb7 {
	width: 221px;
	background: transparent url('images/bg.jpg') no-repeat;
	color : #747862;
	height:20px;
	border:0;
	padding:4px 8px;
	margin-bottom:0px;
}

Right click to Save Images

Image 1

Image in Text Box

/* Image in Text Box */
.tb11 {
	background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
	padding:4px 4px 4px 22px;
	border:1px solid #CCCCCC;
	width:230px;
	height:18px;
}

Right click to Save Images

Image 1


Last updated on 7th April 2014 By Rene Spronk