استایل دهی به checkbox و radio ها با استفاده از جاوااسکریپت

در این آموزش jquery قصد داریم به تگ های input با type های radio و checkbox استایل بدهیم تا ظاهر یکنواخت آنها متفاوت و زیبا باشد. در این روش از کدهای جاوااسکریپت استفاده میکنیم.

مشاهده دمو

کدهای css را به صورت زیر مینویسیم :

[free_vip]

[css]
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background-color: #fb887c;
}

.ac-custom {
padding: 0 3em;
max-width: 900px;
margin: 0 auto;
}

.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}

.ac-custom li {
margin: 0 auto;
padding: 2em 0;
position: relative;
}

.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0,0,0,0.2);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}

.ac-custom input[type=”checkbox”],
.ac-custom input[type=”radio”],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}

.ac-custom input[type=”checkbox”],
.ac-custom input[type=”radio”] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}

.ac-custom label::before {
content: ”;
border: 4px solid #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.ac-radio label::before {
border-radius: 50%;
}

.ac-custom input[type=”checkbox”]:checked + label,
.ac-custom input[type=”radio”]:checked + label {
color: #fff;
}

.ac-custom input[type=”checkbox”]:checked + label::before,
.ac-custom input[type=”radio”]:checked + label::before {
opacity: 0.8;
}

/* General SVG and path styles */

.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 5px;
pointer-events: none;
}

.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}

/* Specific input, SVG and path styles */

/* Circle */
.ac-circle input[type=”checkbox”],
.ac-circle input[type=”radio”],
.ac-circle label::before {
width: 30px;
height: 30px;
margin-top: -15px;
left: 10px;
position: absolute;
}

.ac-circle label::before {
background-color: #fff;
border: none;
}

.ac-circle svg {
width: 70px;
height: 70px;
margin-top: -35px;
left: -10px;
}

.ac-circle svg path {
stroke-width: 5px;
}

/* Box Fill */
.ac-boxfill svg path {
stroke-width: 8px;
}

/* Swirl */
.ac-swirl svg path {
stroke-width: 8px;
}

/* List */
.ac-list ol {
list-style: decimal;
list-style-position: inside;
}

.ac-list ol li {
font-size: 2em;
padding: 1em 1em 0 2em;
text-indent: -40px;
}

.ac-list ol li label {
font-size: 1em;
text-indent: 0;
padding-left: 30px;
}

.ac-list label::before {
display: none;
}

.ac-list svg {
width: 100%;
height: 80px;
left: 0;
top: 1.2em;
margin-top: 0px;
}

.ac-list svg path {
stroke-width: 4px;
}
[/css]

برای اینکه حالت پیش فرض inputها نمایش داده نشوند، opacity آن ها را صفر میدهیم.

کدهای html نیز به صورت زیر می باشد :

[html]
<form class=”ac-custom ac-checkbox ac-checkmark”>
<ul>
<li><input id=”cb6″ name=”cb6″ type=”checkbox”><label for=”cb6″>Credibly reintermediate backend ideas</label></li>
<li><input id=”cb7″ name=”cb7″ type=”checkbox”><label for=”cb7″>Continually reintermediate integrated processes</label></li>
<li><input id=”cb8″ name=”cb8″ type=”checkbox”><label for=”cb8″>Distinctively exploit optimal alignments</label></li>
<li><input id=”cb9″ name=”cb9″ type=”checkbox”><label for=”cb9″>Quickly coordinate e-business applications</label></li>
</ul>
</form>
[/html]

در کدهای جاوااسکریپت مربوطه از تگ SVG استفاده شده است و همه مسیرها ( Path ) با استفاده از این کدها به Checkbox و Radio نسبت داده شده است.

[html]
<script type=”text/javascript” src=”svgcheckbx.js”></script>
[/html]

شما میتوانید فایل کامل این آموزش را از لینک زیر دانلود کنید :

 

[/free_vip]

 

5/5 - (1 امتیاز)

1 دیدگاه دربارهٔ «استایل دهی به checkbox و radio ها با استفاده از جاوااسکریپت»

دیدگاه‌ خود را بنویسید

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

مشاوره رایگان
Scroll to Top