مطالب عمومی

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

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1231 نفر
3 دقیقه
بروزرسانی در: آذر 1, 1400

فهرست مطالب

در این آموزش 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 دیدگاه
انتشار: آذر 14, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا