Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

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

سلام.
احتمالا تابحال با فریمورک هایی کار کردین که شکل چک باکس ها، رادیوها و یا چیزایی که به طور معمول شکلشون عوض نمیشه (مثلا انتخاب فایل ها) رو عوض میکنن. نمونه ش همین 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 استفاده نکنین تا وقتی که کامل بشه. راست هم میگه. هنوز که هنوزه دارن کدهاییشو حذف و اضافه می کنن و هنوز کامل تو مرورگر ها پشتیبانی نمیشه.

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

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

والا ...

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

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

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

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4408
تعداد اعضا : 36696
افراد آنلاین : 7
بازدید امروز : 580
بازدید دیروز : 1,148
گوگل امروز : 20
گوگل دیروز : 92
بازدید هفته : 4,143
بازدید ماه : 22,253
بازدید سال : 56,849
بازدید کلی : 10,906,691