maraljoon

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

9 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام و درود.

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

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

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

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

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

 

ویرایش شده در توسط maraljoon
0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست
در 12 دقیقه قبل، geeksesi گفته است :

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

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

ممنونم.

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

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

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

0

به اشتراک گذاری این پست


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

ممنونم.

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

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

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

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

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

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

 

0

به اشتراک گذاری این پست


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

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

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


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

 

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

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

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

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

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

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

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

https://jsfiddle.net/s7n754xg/

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

 

0

به اشتراک گذاری این پست


لینک به پست
در 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

به اشتراک گذاری این پست


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

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

 

سلام.. تشکر

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

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

0

به اشتراک گذاری این پست


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

سلام.. تشکر

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

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

باسلام

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

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

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

0

به اشتراک گذاری این پست


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

 

تشکر.

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری