1- تغییر رنگ پس زمینه تکست باکس

کد CSS

.myTextbox {
	background-color : #99FFCC;
	border: 1px solid #008000;
	width: 230px;
}

2- تغییر استایل و رنگ حاشیه تکست باکس

کد CSS

.myTextbox {
	border: 2px dashed #D1C7AC;
	width: 230px;
}

3- تغییر استایل با قرار دادن یک تصویر در پس زمینه تکست باکس

کد CSS

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

4- تغییر سایز و استایل حاشیه طرفین یک تکست باکس

کد CSS

. myTextbox {
	width: 230px;
	border: 1px solid #3366FF;
	border-left: 4px solid #3366FF;
}

5- گرد کردن گوشه های تکست باکس

کد CSS

. myTextbox {
	background: url(images/rounded.gif) no-repeat top left;
	height: 22px;
	width: 230px;
}
. myTextbox {
	border: 0;
	width:220px;
	margin-top:3px;
}

6- ایجاد حاشیه دوبل برای تکست باکس

کد CSS

. myTextbox {
	border: 3px double #CCCCCC;
	width: 230px;
}

7- تکست باکس با پس زمینه گرادینت

کد CSS

. myTextbox {
	background-image:url(images/form_bg.jpg);  /* این عکس می تواند1 پیکسل عرض داشته باشد و توسط دستور بعدی تکرار شود */
	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;
}

8- انداختن سایه در داخل تکست باکس

کد CSS

. myTextbox {
	width: 221px;
	background: transparent url('images/bg.jpg') no-repeat;
	color : #747862;
	height:20px;
	border:0;
	padding:4px 8px; /*فاصله داخلی 4 پیکسل از بالا و پائین و 8 پیکسل از چپ و راست  */
	margin-bottom:0px;
}

نکته: تصویر مورد استفاده در این مورد بر خلاف مورد شمار7 باید دقیقا به اندازه تکست باکس ساخته شود. توجه کنید که خاصیت padding باعث افزایش طول و عرض عنصر می شود. بنابراین باید مقداری که در این خاصیت استفاده میکنیم از مقدار طول و عرض تکست باکس کم کنیم. به عبارت دیگر مجموع مقادیر استفاده شده در خاصیت padding به علاوه عرض تکست باکس باید با طول تصویر مساوی باشد. پس در این مثال عرض تصویر مورد استفاده (bg.jpg) باید 237 پیکسل و ارتفاع تصویر باید 28 پیکسل باشد.
2x8=16 (مجموع فاصله از چپ و راست در خاصیت padding)
221+16=237 (عرض تصویر پس زمینه تکست باکس)
2x4=8 (مجموع فاصله از بالا و پائین در خاصیت padding)
20+8=28 (ارتفاع تصویر پس زمینه تکست باکس)

9- انداختن یک تصویر در داخل تکست باکس

کد CSS

. myTextbox {
	background:#FFFFFF url(images/search.png) no-repeat 4px 4px; /* فاصله عکس از چپ و بالا برابر با 4 پیکسل */
	padding:4px 4px 4px 22px; /* از بالا، پائین و راست 4 پیکسل فاصله داخلی و از چپ 22 پیکسل فاصله داخلی */
	border:1px solid #CCCCCC;
	width:230px;
	height:18px;
}

نکته: سایز تصویر ذره بین باید به اندازه ای باشد که از داخل تکست باکس بیرون نزند و برای اینکه از لبه های تکست باکس کمی فاصله داشته باشد، در دستور background میزان فاصله را از چپ و بالا همانند مثال فوق مشخص میکنیم که در اینجا 4 پیکسل فاصله لحاظ شده است. سپس برای اینکه متن نوشته شده در تکست باکس روی عکس قرار نگیرد، با استفاده از خاصیت padding به میزان عرض عکس از لبه داخلی تکست باکس فاصله ایجاد میکنیم. که در اینجا 22 پیکسل از لبه سمت چپ داخل تکست باکس فاصله ایجاد کرده ایم.