how can we make custom radio and checkbox resizable?

Question

I have created a custom checkbox, but getting error in making it resizable using jquery?

$(document).ready(function() {
  $('.squaredFour').resizable({});
});

.squaredFour {
 display: none;
}
.squaredFour {
 width: 20px; 
 margin: 20px auto;
 position: relative;
}

.label {
 cursor: pointer;
 position: absolute;
 width: 20px;
 height: 20px;
 top: 0;
 border-radius: 4px;

 -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 background: #fcfff4;

 background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 content: '';
 position: absolute;
 width: 9px;
 height: 5px;
 background: transparent;
 top: 4px;
 left: 4px;
 border: 3px solid #333;
 border-top: none;
 border-right: none;

 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

.label:hover::after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 filter: alpha(opacity=30);
 opacity: 0.5;
}

.squaredFour:checked + label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" value="None" id="squaredFour" name="check" class="squaredFour" />
<label for="squaredFour" class="label"></label>

no its not working i want to make checkbox resizable and draggble using mouse in firefox. @fadhly permata — komal, Sep 29 '16 at 08:50
what do you mean? I am just moving your code from fiddle into internal SO snippet preview. I didn't do anything on your script — Fadhly Permata, Sep 29 '16 at 08:57
ok but what i ask give me solution on that if you know @fadhly — komal, Sep 29 '16 at 09:04

Shubham Khatri · Answer 1 · 2016-09-29T08:06:46.967

You need to include jquery UI in your code to make use of resizable function and make sure you include jquery before that. It works now

$(document).ready(function() {
  $('.squaredFour').resizable({});
});

.squaredFour {
 display: none;
}
.squaredFour {
 width: 20px; 
 margin: 20px auto;
 position: relative;
}

.label {
 cursor: pointer;
 position: absolute;
 width: 20px;
 height: 20px;
 top: 0;
 border-radius: 4px;

 -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 background: #fcfff4;

 background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 content: '';
 position: absolute;
 width: 9px;
 height: 5px;
 background: transparent;
 top: 4px;
 left: 4px;
 border: 3px solid #333;
 border-top: none;
 border-right: none;

 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

.label:hover::after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 filter: alpha(opacity=30);
 opacity: 0.5;
}

.squaredFour:checked + label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>


<input type="checkbox" value="None" id="squaredFour" name="check" class="squaredFour" />
<label for="squaredFour" class="label"></label>

i have use these files. but resizable using mouse is not working @ shubham — komal, Sep 29 '16 at 09:13
"code.jquery.com/jquery-1.12.4.js says page not found. try the above cdn mentioned in the answer — Shubham Khatri, Sep 29 '16 at 09:14
Did you get a chance to try it and could you resolve the issue — Shubham Khatri, Sep 29 '16 at 10:53

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

You dont need to use JQuery. You can achieve it using CSS with help of image

#squaredFour
{ 
    float: left; 
    width: 200px; 
    height: 200px;
    background : url("pathofimage/check.png");
}

Example here

You should check similar questions here Checkbox size in HTML/CSS and How can I make a checkbox bigger?

edited May 23 '17 at 12:09

Community

1
1

answered Sep 29 '16 at 08:03

Hidayt Rahman

1,798
22
27

tnx but i want to make checkbox resizable and draggble using mouse in firefox.and i have used jquery without this how can i apply resizble() @hidayt – komal Sep 29 '16 at 08:53
when you want to resize the checkbox ? you want it to click on any element or want to just drag the checkbox to resize. can you plese define it? – Hidayt Rahman Sep 29 '16 at 09:59

how can we make custom radio and checkbox resizable?

2 Answers2