استایل دادن دلخواه به چک باکس ها و ورودی های فایل

سلام.
احتمالا تابحال با فریمورک هایی کار کردین که شکل چک باکس ها، رادیوها و یا چیزایی که به طور معمول شکلشون عوض نمیشه (مثلا انتخاب فایل ها) رو عوض میکنن. نمونه ش همین Bootstrap یا هر چیز دیگه ای...
"اصول کار این فریمورک های خصوصیت for یه تگ label هستش که برابر با id اون input باشه"
بعد ما هر استایلی رو که به اون label بدیم؛ انگار اون استایل رو به اون input دادیم.
توجه!
هر استایل یا کد حاوااسکریپتی که اینجا میبینید فقط برای استایل دادن به label هستن و کار اصلی رو همون خصوصیت for تگ label مون میکنه.

اما حالا بگیم که اینجا چه اتفاقی افتاده:
input ~ label[for]
این سلکتور label هایی رو انتخاب میکنه که خاصیت for داشته باشن و قبلشون هم یه input وجود داشته باشه.

input:checked:not([type="file"]) + label[for]
این سلکتور هم label ـی رو انتخاب میکنه که خاصیت for داشته باشه و قبلش یه input باشه با این شرایط:
1- تیک خورده باشه.
2- از نوع ورودی فایل نباشه.
توجه کنین که + برای اینه که فقط یکی انتخاب بشه اما ~ هر چند تا باشه رو انتخاب میکنه...
(فهم تفاوت این سلکتورها جز با تمرین بدست نمیاد؛ حالا من خودمو جر بدم... :دی )

input[type="file"]:valid + label[for]
این سلکتور label هایی رو انتخاب میکنه که قبلشون یه input هز نوع فایل وجود داشته باشه و "مقدار مناسب" داشته باشه.
کارکرد این سلکتور فقط در صورتی مشخص میشه که ما به input مون خصوصیت required داشته باشیم؛ و این یعنی نیاز به ساپورت html5...

توی کدهای کامنت شده هم میبینین که من برای input های خاص؛ رنگ دلخواهم رو انتخاب کردم.

اما کلا این استایل های ما قراره چه نتیجه ای داشته باشن؟؟
در حالت عادی من یه استایلی بهش دادم.
بعد گفتم هر وقت که المنت مون انتخاب شد رنگش عوض بشه(#eee)

در مورد اون فایل هم هروقت فایلی انتخاب شد رنگش تغییر کنه(بشه #eee)

کدهای جاوااسرکیپت رو هم واقعا ساده نوشتم و فکر نمیکنم احتیاج به توضیحی داشته باشن؛ با این حال هم در کامنتا و هم در انجمن؛ جواب میدم...

با تشکر... :P
پ.ن.:
مویزرکس اگه عنوان جالبتری سراغ داشتی همون رو بزار؛ به نظرم این زیاد خوب نشد.دریافت کد و نمایش دمو

توضیحات moisrex

آقای masterhk علاقه شدیدی به HTML5 و CSS3 دارن این در حالی هست که WC3 هنوز میگه از HTML5 استفاده نکنین تا وقتی که کامل بشه. راست هم میگه. هنوز که هنوزه دارن کدهاییشو حذف و اضافه می کنن و هنوز کامل تو مرورگر ها پشتیبانی نمیشه.

البته شما که اینجا استفاده کردین برای مرورگر های قدیمی مشکلی پیش نمیاد ولی حالا که استفاده کردین اگر استایل های بهتری بهش داده میشد بهتر بود.

راستی اون قسمت که گفتین حتما با فریم ورکی کار کردین و ... نه من با چنین فریم ورکایی کار نکردم و بیکارم نیستم بشینم با چنین چیزای بیخودی کار کنم. همین که زور زدم پروتکل های عمومی رو بلد شدم زیادمم هست :دی

والا ...