11
<style>  
input.checkbox  
{  
    width:300px;  
    height:300px;  
    margin:0px 0 0 0px;  
}  
</style>  
<body>  
<input type="checkbox" class="checkbox"/>

Iwant to increase the checkbox size, but this code is properly work in Internet Explorer, but not in Safari.

4 Answers 4

23
input[type=checkbox] {
    -webkit-transform: scale(3,3);
}
1
  • 7
    Unfortunately it's not working any more. I'm using Safari Version 13.1.1 Commented Jul 13, 2020 at 11:19
0

You have to scale them with a custom webkit css property:

input.checkbox {
    -webkit-transform: scale(1.3,1.3);
}
3
  • This is incorrect, that's why. It will only work on input tags with a class of textbox. @Styler's answer is correct, and works
    – Steve
    Commented Feb 23, 2012 at 14:05
  • 3
    @Steve both answers do the same thing. Mine just uses a class selector to match OP's markup. Styler's is definitely better though because it covers the generic case rather than this specific question.
    – Pat
    Commented Jan 23, 2013 at 2:16
  • 1
    I think they changed something in safari? This works in every browser except safari for me. using -webkit prefix and using [type=checkbox] selector does nothing for me. Though I did notice a tiny increase when setting font-size: 200%. Commented Aug 15, 2019 at 7:28
0

Tutorialspoint has a better answer: https://www.tutorialspoint.com/how-to-set-checkbox-size-in-html-css

      input[type=checkbox] {
         -webkit-appearance: none;
         display: inline-block;
         width: 40px;
         height: 40px;
         background-color: red;
         border-radius: 5px;
         border: 3px solid lightgray;
         margin-right: 10px;
      }
      input[type=checkbox]:checked {
         background-color: lightgreen;
      }
0

For future people, the solution works, however (as far as I can tell, I may be wrong about this) transform is no longer under the -webkit prefix!

input[type=checkbox] {
    transform: scale(3,3);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.