رفتن به مطلب

کد رنگی شدن اسکرول بار


پست های پیشنهاد شده

سلام...

همون طور که از عنوان تاپیک معلومه کدی میخوام که رنگ اسکرول بار رو تغییر بده... اگه کد سی اس اس باشه بهتره! :)

لینک به ارسال

مرورگرهال webkit


/*----------------scrollbar---------*/
::-webkit-scrollbar {background:#FFFFFF; height:1px; width:10px;}
::-webkit-scrollbar-thumb {background:#0099dd; border-radius:; box-shadow:;}
::-webkit-scrollbar-corner { background:#000; }
::-webkit-scrollbar-thumb:hover{background:#FF9900; border-radius:; box-shadow:;}

لینک به ارسال
  • 1 ماه بعد...

برای مرورگرهای فایرفاکس و اکسپلور از چه کدی استفاده کنم؟

آخه وقتی webkit رو به moz یا ms تغییر میدم عمل نمیکنه!

لینک به ارسال

تست کنید:


SCROLLBAR-FACE-COLOR: red; SCROLLBAR-HIGHLIGHT-COLOR: gray;
SCROLLBAR-SHADOW-COLOR: black; SCROLLBAR-ARROW-COLOR: gray;
SCROLLBAR-TRACK-COLOR: black; SCROLLBAR-DARKSHADOW-COLOR: red

لینک به ارسال

برای iIEلعنتی :D


body{
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}

برای کروم باحال ;)


::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

برای فایر فاکس


@-moz-document url-prefix(http://),url-prefix(https://) {
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
scrollbarbutton
{
display: none !important;
}
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}

ویرایش شده توسط reazah
لینک به ارسال

نکته : استفاده از منابع این کار بالاست و برای سایتهای وردپرسی توصیه نمی شه

مگر اینکه سرور قوی و مناسب داشته باشید

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...