رفتن به مطلب

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


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

سلام و درود.

دوستان چطور میشه به چک باکس ها استایل داد. مثلا اندازشون ، رنگ و ... رو تغییر داد. موارد زیادی رو تو نت سرچ کردم هم مقاله های خارجی هم ایرانی ولی هیچکدوم کوچکترین تغییری روی چک باکس ایجاد نمیکنن. نمیدونم این آموزش ها که میذارن تست شدس یا اینکه الکی و فقط برای ایندکس شدن یک مطلبه. شایدم مشکل از منه.

یکسری چک باکس دارم که میخوام در حالت عادی بکگراند داشته باشه که این بکگراند بصورت عکسه. وقتی چک باکس تیک میخوره و فعاله مثلا یک border دورش اضافه بشه. و وقتی تیک برداشته میشه border هم حذف بشه.

چطور میتونم اینکارو انجام بدم. ممنون میشم راهنمایی کنید.

کد فرم چک باکس به این شکله:

<form>
		<label> <input class="addon-checkbox" name=""  value="" type="checkbox">  تست </label>
          
	</form>

 

ویرایش شده توسط maraljoon
لینک به ارسال
در 12 دقیقه قبل، geeksesi گفته است :

برای چک باکستون یک کلاس تعریف کنید و توی css به اون کلاس خاصیت :

hover | active رو استایل بدید :)

ممنونم.

مطمئنید که به همین راحتی مثل عناصر دیگه چک باکس هم استایل میگیره؟؟

خودتون تست کردید؟

چک باکس بصورت معمول استایلی نمیگیره

لینک به ارسال
در 4 ساعت قبل، maraljoon گفته است :

ممنونم.

مطمئنید که به همین راحتی مثل عناصر دیگه چک باکس هم استایل میگیره؟؟

خودتون تست کردید؟

چک باکس بصورت معمول استایلی نمیگیره

بله به همین راحتی قابل استایل دهی هست

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

.mostafa {}
.mostafa:hover {} استایل زمانی که موس روی اون میره
.mostafa:focus {}استایل زمانی که روی اون کلیک میشه 

 

لینک به ارسال
در 13 دقیقه قبل، djmostafa گفته است :

بله به همین راحتی قابل استایل دهی هست

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


.mostafa {}
.mostafa:hover {} استایل زمانی که موس روی اون میره
.mostafa:focus {}استایل زمانی که روی اون کلیک میشه 

 

جسارتا این چیزی که شما میگید شدنی نیست.

من دنبال این هستم که مثلا به یک چک باکس بکگراند بدم. حالا چه رنگ باشه چه تصویر.  نه خاصیت چک باکس. بالاخره هرکاری میخوام انجام بدم از یه خاصیت خاص استفاده میکنم

شما فقط در مورد خاصیت فوکوس و هاور گفتید. نه تغییر استایل

مثلا الان میشه به چک باکس گفت وقتی هاور میشه یک فاصله از بالا بگیره.

به این شکل: chekbox:hover{margin-top:10px;}

ولی نمیشه بهش بکگراند داد یا به شکل معمول اندازه ای برای عرض و ارتفاع یک چک باکس در نظر گرفت.

یک نمونه به همین روشی که شما گفتید بصورت آنلاین درست کردم که تو لینک زیر میتونید ببینید.

https://jsfiddle.net/s7n754xg/

در هرصورت بازم ممنون بابت همراهیتون.

 

لینک به ارسال
در 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;
}

 

لینک به ارسال
در 4 ساعت قبل، nazanin123 گفته است :

باسلام شما ابتدا یک کلاس بدید به چک باکس ، به مثال زیر با فرض کلاس myinput توجه کنید

 

سلام.. تشکر

خوشبختانه جواب داد. فقط یه مشکلی الان دارم اینه که این کدها برای چک باکس فقط توی کروم نمایش داده میشه ولی در فایرفاکس هیچ تغییری روی چک باکس ها ایجاد نمیشه.

راه حلی برای این مورد دارید؟

لینک به ارسال
در 4 ساعت قبل، maraljoon گفته است :

سلام.. تشکر

خوشبختانه جواب داد. فقط یه مشکلی الان دارم اینه که این کدها برای چک باکس فقط توی کروم نمایش داده میشه ولی در فایرفاکس هیچ تغییری روی چک باکس ها ایجاد نمیشه.

راه حلی برای این مورد دارید؟

باسلام

لینک آنلاین بدید و دقیقا مشکل رو بگین بشه کمک کرد. من طبق سوال کلی شما یک مثال کلی مطرح کردم.  از فایرباگ استفاده کنید ، با آزمون و خطا نتیجه میده

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

اگر مشکلتون حل نشد لینک آنلاین بدید 

لینک به ارسال
در 11 ساعت قبل، nazanin123 گفته است :

 

تشکر.

متاسفانه آنلاین نیست دارم رو لوکال کار میکنم.

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

اون آموزشای codepen رو هم قبلا تست کرده بودم تو فایرفاکس جواب نمیداد.

لینک به ارسال

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

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

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

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

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

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

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

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

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