checkbox size in safari?

F

4

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.

Fluorescent answered 16/7, 2010 at 12:22 Comment(0)

S

23

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

Strasbourg answered 12/3, 2011 at 23:3 Comment(1)

Unfortunately it's not working any more. I'm using Safari Version 13.1.1 – Drown 13/7, 2020 at 11:19

J

0

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

input.checkbox {
    -webkit-transform: scale(1.3,1.3);
}

Jayejaylene answered 16/7, 2010 at 12:35 Comment(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 – Please 23/2, 2012 at 14:5

@Please 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. – Jayejaylene 23/1, 2013 at 2:16

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%. – Kimberelykimberlee 15/8, 2019 at 7:28

A

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;
      }

Arrester answered 21/9, 2023 at 21:4 Comment(0)

M

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);
}

Multiply answered 24/3, 2024 at 21:45 Comment(0)

Recommended topics

Hot tags