maral_hamidi 82 ارسال شده در آذر 96 گزارش بازنشر ارسال شده در آذر 96 (ویرایش شده) سلام و درود. دوستان چطور میشه به چک باکس ها استایل داد. مثلا اندازشون ، رنگ و ... رو تغییر داد. موارد زیادی رو تو نت سرچ کردم هم مقاله های خارجی هم ایرانی ولی هیچکدوم کوچکترین تغییری روی چک باکس ایجاد نمیکنن. نمیدونم این آموزش ها که میذارن تست شدس یا اینکه الکی و فقط برای ایندکس شدن یک مطلبه. شایدم مشکل از منه. یکسری چک باکس دارم که میخوام در حالت عادی بکگراند داشته باشه که این بکگراند بصورت عکسه. وقتی چک باکس تیک میخوره و فعاله مثلا یک border دورش اضافه بشه. و وقتی تیک برداشته میشه border هم حذف بشه. چطور میتونم اینکارو انجام بدم. ممنون میشم راهنمایی کنید. کد فرم چک باکس به این شکله: <form> <label> <input class="addon-checkbox" name="" value="" type="checkbox"> تست </label> </form> ویرایش شده آذر 96 توسط maraljoon نقل قول لینک به ارسال
geeksesi 41 ارسال شده در آذر 96 گزارش بازنشر ارسال شده در آذر 96 برای چک باکستون یک کلاس تعریف کنید و توی css به اون کلاس خاصیت : hover | active رو استایل بدید نقل قول لینک به ارسال
maral_hamidi 82 ارسال شده در آذر 96 مالک گزارش بازنشر ارسال شده در آذر 96 در 12 دقیقه قبل، geeksesi گفته است : برای چک باکستون یک کلاس تعریف کنید و توی css به اون کلاس خاصیت : hover | active رو استایل بدید ممنونم. مطمئنید که به همین راحتی مثل عناصر دیگه چک باکس هم استایل میگیره؟؟ خودتون تست کردید؟ چک باکس بصورت معمول استایلی نمیگیره نقل قول لینک به ارسال
djmostafa 61 ارسال شده در آذر 96 گزارش بازنشر ارسال شده در آذر 96 در 4 ساعت قبل، maraljoon گفته است : ممنونم. مطمئنید که به همین راحتی مثل عناصر دیگه چک باکس هم استایل میگیره؟؟ خودتون تست کردید؟ چک باکس بصورت معمول استایلی نمیگیره بله به همین راحتی قابل استایل دهی هست یک کلاس براش تعریف کنید مانند mostafa و به شکل زیر بهش استایل دهید .mostafa {} .mostafa:hover {} استایل زمانی که موس روی اون میره .mostafa:focus {}استایل زمانی که روی اون کلیک میشه نقل قول لینک به ارسال
maral_hamidi 82 ارسال شده در آذر 96 مالک گزارش بازنشر ارسال شده در آذر 96 در 13 دقیقه قبل، djmostafa گفته است : بله به همین راحتی قابل استایل دهی هست یک کلاس براش تعریف کنید مانند mostafa و به شکل زیر بهش استایل دهید .mostafa {} .mostafa:hover {} استایل زمانی که موس روی اون میره .mostafa:focus {}استایل زمانی که روی اون کلیک میشه جسارتا این چیزی که شما میگید شدنی نیست. من دنبال این هستم که مثلا به یک چک باکس بکگراند بدم. حالا چه رنگ باشه چه تصویر. نه خاصیت چک باکس. بالاخره هرکاری میخوام انجام بدم از یه خاصیت خاص استفاده میکنم شما فقط در مورد خاصیت فوکوس و هاور گفتید. نه تغییر استایل مثلا الان میشه به چک باکس گفت وقتی هاور میشه یک فاصله از بالا بگیره. به این شکل: chekbox:hover{margin-top:10px;} ولی نمیشه بهش بکگراند داد یا به شکل معمول اندازه ای برای عرض و ارتفاع یک چک باکس در نظر گرفت. یک نمونه به همین روشی که شما گفتید بصورت آنلاین درست کردم که تو لینک زیر میتونید ببینید. https://jsfiddle.net/s7n754xg/ در هرصورت بازم ممنون بابت همراهیتون. نقل قول لینک به ارسال
Monica 322 ارسال شده در آذر 96 گزارش بازنشر ارسال شده در آذر 96 در 2 ساعت قبل، maraljoon گفته است : جسارتا این چیزی که شما میگید شدنی نیست. من دنبال این هستم که مثلا به یک چک باکس بکگراند بدم. حالا چه رنگ باشه چه تصویر. نه خاصیت چک باکس. بالاخره هرکاری میخوام انجام بدم از یه خاصیت خاص استفاده میکنم شما فقط در مورد خاصیت فوکوس و هاور گفتید. نه تغییر استایل مثلا الان میشه به چک باکس گفت وقتی هاور میشه یک فاصله از بالا بگیره. به این شکل: chekbox:hover{margin-top:10px;} ولی نمیشه بهش بکگراند داد یا به شکل معمول اندازه ای برای عرض و ارتفاع یک چک باکس در نظر گرفت. یک نمونه به همین روشی که شما گفتید بصورت آنلاین درست کردم که تو لینک زیر میتونید ببینید. https://jsfiddle.net/s7n754xg/ در هرصورت بازم ممنون بابت همراهیتون. باسلام شما ابتدا یک کلاس بدید به چک باکس ، به مثال زیر با فرض کلاس myinput توجه کنید .myinput[type="checkbox"]:before{ position: relative; display: block; width: 11px; height: 11px; border: 1px solid #808080; content: ""; background: #FFF; } .myinput[type="checkbox"]:after{ position: relative; display: block; left: 2px; top: -11px; width: 7px; height: 7px; border-width: 1px; border-style: solid; border-color: #B3B3B3 #dcddde #dcddde #B3B3B3; content: ""; background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%); background-repeat: no-repeat; background-position:center; } .myinput[type="checkbox"]:checked:after{ background-image: url('data:image/png); } .myinput[type="checkbox"]:disabled:after{ -webkit-filter: opacity(0.4); } .myinput[type="checkbox"]:not(:disabled):checked:hover:after{ background-image: url('data:image/png); } .myinput[type="checkbox"]:not(:disabled):hover:after{ background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%); border-color: #85A9BB #92C2DA #92C2DA #85A9BB; } .myinput[type="checkbox"]:not(:disabled):hover:before{ border-color: #3D7591; } 1 نقل قول لینک به ارسال
maral_hamidi 82 ارسال شده در آذر 96 مالک گزارش بازنشر ارسال شده در آذر 96 در 4 ساعت قبل، nazanin123 گفته است : باسلام شما ابتدا یک کلاس بدید به چک باکس ، به مثال زیر با فرض کلاس myinput توجه کنید سلام.. تشکر خوشبختانه جواب داد. فقط یه مشکلی الان دارم اینه که این کدها برای چک باکس فقط توی کروم نمایش داده میشه ولی در فایرفاکس هیچ تغییری روی چک باکس ها ایجاد نمیشه. راه حلی برای این مورد دارید؟ نقل قول لینک به ارسال
Monica 322 ارسال شده در آذر 96 گزارش بازنشر ارسال شده در آذر 96 در 4 ساعت قبل، maraljoon گفته است : سلام.. تشکر خوشبختانه جواب داد. فقط یه مشکلی الان دارم اینه که این کدها برای چک باکس فقط توی کروم نمایش داده میشه ولی در فایرفاکس هیچ تغییری روی چک باکس ها ایجاد نمیشه. راه حلی برای این مورد دارید؟ باسلام لینک آنلاین بدید و دقیقا مشکل رو بگین بشه کمک کرد. من طبق سوال کلی شما یک مثال کلی مطرح کردم. از فایرباگ استفاده کنید ، با آزمون و خطا نتیجه میده در این لینک چندین چک باکس با استایل های بسیار حرفه ای قرار گرفت که در فایرفاکس و کروم کار میکنن . میتونید کلاس هر کدوم رو زیر چک باکس مشاهده کنید. اگر مشکلتون حل نشد لینک آنلاین بدید نقل قول لینک به ارسال
maral_hamidi 82 ارسال شده در آذر 96 مالک گزارش بازنشر ارسال شده در آذر 96 در 11 ساعت قبل، nazanin123 گفته است : تشکر. متاسفانه آنلاین نیست دارم رو لوکال کار میکنم. احتمالا مشکل از فایرفاکس من باشه. باید روی چندتا سیستم دیگه تست کنم. اون آموزشای codepen رو هم قبلا تست کرده بودم تو فایرفاکس جواب نمیداد. نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .