استایل دهی به چک باکس در css

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

برای شروی ما نیاز به قطعه کد CSS که چک باکس اصلی رو پنهان کنم . برای انجام این کار نیاز دارم اضافه کنم به فایلمون.

/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}

بعد از این که ما پنهان کردیم چک باکس رو بعدش باید یک label رو کنارش اضافه میکنیم ، زمانی که شما کلیک میکنید بر روی label با attribute ، for چک باکس هم کلیک خورده میشه . به این معنی هست که زمانی که ما روی label کلیک میکنیم بر روی چک باکس عمل میکنه و ما استایلمون رو هم رو label اعمال میکنیم.
استایلی که به چک باکس داریم باهم ایجاد میکنیم به صورت اسلایدر هستش ، داری موقعیت چک و غیر چک هست . زمانی که رو دکمه اسلایدر(label المان ) کلیک میکنی جابه جا میشه و موقعیتش تغییر می کنه. ما برا شروع کار ناحیه چک باکس رو در ابتدا با html ایجاد میکنیم به صورت کد زیر
<section>
<!-- Checbox One -->
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>

برای اینکه چک باکس رو به صورت اسلایدر در بیاریم نیاز به یک خطی هستیم که دکمه اسلایدر بر روی اون جابه جا بشه ، برای انجام کار ما میایم المان div اطراف چک باکس رو به صورت خط اسلایدر در بیاریم به صورت زیر

/**
* Create the slider bar
*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}

ما الان label رو به صورت دکمه در می آورم ، همچنین ما میخوایم دکمه مون از یک طرف اسلایدر به سمت دیگه اش بره که با کد زیر امکان پذیر است.

/**
* Create the slider from the label
*/
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}

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

/**
* Move the slider in the correct position if the checkbox is clicked
*/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}

موفق باشید
با ما همراه باشید

local_offerevent_note خرداد ۱۳, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *