how to increase the size of checkbox of the box.

Question

Hi, How to increase the size of checkbox of the box. I have tried wit height and width, but is not working. Please suggest me. Thanks

ali tuncer · Answer

When you change size, checkbox won't get bigger but it will be easier to click because border will get larger.. you can check these links to make checkbox larger : https://stackoverflow.com/questions/3166244/how-to-increase-the-size-of-checkbox-in-winforms/13089643 http://forum.codecall.net/topic/73939-how-to-resize-a-checkbox-using-the-net-framework/

shafeek ck · Answer

input[type="checkbox"]{ width: 150px; height: 100px; }

Sandy · Answer

Hi Shefali, Input tag with type checkbox does not support height and width directly you can decorate checkbox with help of span. Below is an example:- /* The container */ .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .container input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: "" ; position: absolute; display: none; } /* Show the checkmark when checked */ .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } Custom Checkboxes class = "container" >One "checkbox" checked= "checked" > class = "checkmark" > class = "container" >Two "checkbox" > class = "checkmark" > class = "container" >Three "checkbox" > class = "checkmark" > class = "container" >Four "checkbox" > class = "checkmark" > Let me know if you face any issue. Thanks Sandy