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


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

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

رنگ پس زمینه

کد CSS :

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

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

رنگ و استایل حاشیه

کد CSS :

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


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

تصویر پس زمینه کل تکس باکس

کد CSS :

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


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

حاشیه کناری ضخیم تر

کد CSS :

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

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

گوشه های گرد

کد CSS :

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


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

حاشیه دوبل

کد CSS :

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


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

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

کد CSS :

. myTextbox {

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

همچنین:  حذف اسکرول بار scroll bar عمودی و افقی در CSS


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

سایه در حاشیه داخلی

کد CSS :

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


نکته: تصویر مورد استفاده در این مورد بر خلاف مورد شمار۷ باید دقیقا به اندازه تکست باکس ساخته شود. توجه کنید که خاصیت padding باعث افزایش طول و عرض عنصر می شود. بنابراین باید مقداری که در این خاصیت استفاده میکنیم از مقدار طول و عرض تکست باکس کم کنیم. به عبارت دیگر مجموع مقادیر استفاده شده در خاصیت padding به علاوه عرض تکست باکس باید با طول تصویر مساوی باشد. پس در این مثال عرض تصویر مورد استفاده (bg.jpg) باید ۲۳۷ پیکسل و ارتفاع تصویر باید ۲۸ پیکسل باشد.

۲x8=16 (مجموع فاصله از چپ و راست در خاصیت padding)
۲۲۱+۱۶=۲۳۷ (عرض تصویر پس زمینه تکست باکس)
۲x4=8 (مجموع فاصله از بالا و پائین در خاصیت padding)
۲۰+۸=۲۸ (ارتفاع تصویر پس زمینه تکست باکس)

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

تصویر پس زمینه کوچک در داخل تکست باکس

کد CSS :

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


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

همچنین:  افزودن استایل به لینک link css

اشتراک گذاری این صفحه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.