بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

آموزش سلکتور checked: در css

مقالات طراحی سایت

چگونه توسط سلکتور checked ، طراحی جذاب‌تری را برای فرم های خود در سایت ایجاد کنیم ؟ تغییر استایل چک باکس ها تنها در چند دقیقه !

0 63
آموزش سلکتور checked: در css

در سلسله مقالات آموزشی سلکتورهای css در خانواده سلکتورهایی که بصورت : ویا :: بودند ، اکنون به یکی از انتخاب کننده‌های بسیار کاربردی رسیدیم که در طراحی سایت توسط زبان css اهمیت بسیار بالایی دارد . این انتخاب کننده checked نام دارد و بروی تمامی مرورگرها پشتیبانی شده و می‌توانید با خیال راحت از آن استفاده کنید .

ویژگی checked چه زمانی در سایت استفاده می‌شود ؟

ویژگی checked در المان‌های فرم و در قسمتی که از checkbox یا radio استفاده شده است مشخص می‌شود . ویژگی های checkbox یا radio به شکل زیر در فرم استفاده می‌شوند :

<input type="checkbox">
<input type="radio">

مطمئنا تمامی شما برای یکبار هم که شده از این نوع ورودی ها در فرم های خودتان استفاده کرده‌اید اما شاید کمتر به این موضوع فکر کرده باشید که چگونه کاری کنیم که وقتی روی هریک از این المان های کلیک شد یا به اصطلاح ، input مدنظر چک شد و تیک خورد ، برخی کارها انجام شود .

مثلا برای ساخت دکمه‌هایی که بصورت سوئیچی هستند و با کلیک روی آنها ، یک اسلایدر ریز به حرکت درآمده و به چپ و راست حرکت می‌کند ، این ویژگی بسیار بدردبخور است . یک نمونه از طراحی این دکمه ها را می‌توانید در فرم ورود به حساب کاربری خودتان داخل سئونود مشاهده کنید .

تصور کنید که قصد داریم وقتی روی یک چک باکس کلیک شد ، استایل خاصی روی آن اعمال شود ، پس باید ویژگی checked آن را توسط css کنترل کنیم . یک نمونه از این کد می‌تواند به شکل زیر باشد :

input [type='checkbox']:checked {
  border: none;
  outline: 2px solid #515151;
}

در این کد روی تمامی input هایی که از نوع checkbox هستند ، به هنگام چک شدن یا به عبارتی انتخاب شدن توسط کاربر ، یک استایل ریز اعمال کردیم . استایل نویسی برای input هایی که از نوع checkbox یا radio هستند باید بسیار هوشمندانه و با رعایت اصول انجام شود .

برای اینکه یک استایل جذاب به input های خودتان که از دو نوع بالا هستند اعمل کنید باید ویژگی checked را با after و before ها ترکیب کرده و یک دیزاین جذاب بسازید . همانطور که گفته شد یک نمونه از این طراحی جذاب که با ترکیب after و before و حالت checked طراحی شده است صفحه ورود در سئو نود است که به شکل زیر است :

کنترل حالت checked با css در input ها

به دکمه ” به خاطر بسپار ” در داخل فرم توجه کنید . در این حالت ابتدا توسط دستورات after و before استایل خاصی به این input که از نوع checkbox است داده شده و سپس زمانی که این input توسط کاربر انتخاب شده ( کلیک شد ) و چک شده است ، استایل آن را مجدد توسط after و before تغییر دادیم . یک نمونه کد html برای این مثال به شکل زیر است :

<input type="checkbox" name="rmb" id="rmb" >
<label for="rmb">Remember Me</label>

و نهایتا کد css نیز برای این بخش یا اصطلاحا دکمه به شکل زیر نوشته شده است :

.Panel_FormBox label {
    cursor: pointer;
    padding-left: 60px;
    font-size: 14px;
    top: -15px;
}
.Panel_FormBox input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0;
}
.Panel_FormBox label::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 20px;
    top: 2px;
    left: 0;
    background-color: #ddd;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 4px;
}
.Panel_FormBox label::after {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    top: 5px;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 4px;
}
.Panel_FormBox input:checked+label::before {
    background-color: #e91e63;
}
.Panel_FormBox input:checked+label::after {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

البته این کد صرفا یک مثال ساده از طراحی input هایی از نوع checkbox است که به کمک تغییر حالت در checkbox و همچنین after و before ایجاد شده است .

این ویژگی هم برای input از نوع checkbox و هم برای input از نوع radio کاربردی است و برای انتخاب شدن هردوی این input ها توسط کاربر سایت می‌توانید دقیقا همین استایل نویسی را انجام دهید .

توجه داشته باشید که اگر در زمینه طراحی سایت توسط زبان css فعال هستید حتما اطلاع دارید که این زبان تنها زبان اصلی برای طراحی قالب سایت شما است و از این جهت لازم است تا به تمامی سلکتورهای این زبان آشنایی داشته باشید .

برای مثال اگر به همین سلکتور برای کنترل حالت چک شدن المان های فرم آشنایی نداشته باشید ، از استایل نویسی عاجز خواهید ماند و توانایی تغییر استایل پیشفرض این دسته از تگ های html را نخواهیم داشت . اما اگر مقالات قبلی را در زمینه طراحی سایت و آموزش سلکتورهای خاص در css مطالعه کرده باشید ، اطلاع دارید که تقریبا تمامی المان های داخل صفحه را می‌توان با سلکتورهای css تغییر داد . امیدواریم این محتوای آموزشی برای شما مفید واقع شود .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

کاربرد انتخاب کننده required در زبان css را شناخته و در طراحی های خود از آن بخوبی استفاده کنید !

0 46

چگونه توسط انتخابگر optional در css ، المان های فرم را بهتر و راحت‌تر کنترل کنیم ؟ ویژگی‌های سلکتور optional در طراحی سایت .

0 59
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود