CODEWITHSUNDEEP
htmlcssgoogle-chrome
P.Milan
P.Milan

Reputation: 73

Different Chrome checkbox size

I would like to resolve, in some elegant way, a design problem which only happens in Chrome. When I wrap “input” type checkbox with div which has bootstrap class col-…. This div div is filled by checkbox, but in Chrome the checkbox also changes size (gets bigger) I found a solution, which basically resolves problem, but is not ideal.

 @media (-webkit-min-device-pixel-ratio: 0) {
       [class*="col-"] input[type=checkbox] {
            -webkit-transform: scale(0.5) !important;
        }
    }

JSFiddle example

Firstly, I need to make this rule for Chrome only, because according to MDN this not best practice. Secondly, the change of scale not only affects the size of the check box, but also everything within the div. Due to that, I lose the feature, that customer must not click exactly into the check-box to get it checked. Is there any better solution?

 

Upvotes: 1

Views: 1378

Answers (1)

AuHau
AuHau

Reputation: 145

Well your problem is that in your code presented in the JSFiddle, you are using form-control class which has fixed height. Regarding FF and Chrome behaviour, it seems that only Chrome actually lets you to set the dimensions of checkbox using CSS...

I recommend you to check the Bootstrap docs and see how the checkbox is implemented in Bootstrap.

Upvotes: 2

Related Questions