استایل زیبا برای textarea و input - کد CSS

نویسنده :
تاریخ:چهارشنبه 29 مهر 1394-06:30 ب.ظ


استایل دهی تکست باکس ها بسیار ساده است و تنها با چند خط کد CSS می توانیم به استایل های متنوعی دست پیدا کنیم. در ادامه نمونه هایی از انواع حالت های قابل پیاده سازی را به شما نشان خواهم داد که با تغییرات بسیار ساده و اندک در کدهای مورد استفاده برای هر کدام، می توانید استایل متناسب با تم و قالب وبسایت خود را ایجاد کنید.

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;   
border: 0;   
width:220px;   
margin-top:3px;
}

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


حاشیه دوبل

کد CSS :

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

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


حاشیه گرادینت

کد CSS :

. myTextbox {   

/* این عکس می تواند 1 پیکسل عرض داشته باشد و توسط دستور بعدی تکرار شود */  
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;
}

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 پیکسل از لبه سمت چپ داخل تکست باکس فاصله ایجاد کرده ایم.




تلگرام

دسته بندی : CSS 

برچسب ها:

نظرات() 
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر
نظرات پس از تایید نشان داده خواهند شد.