Menu
I have the same version of Chrome 31 open for two sites, and one site has the checkbox on the right, and I checked the styles in the debugger but I can't seem to figure out what is causing it.
it must be a custom Chrome style applied since it's just using standard <input type="checkbox" />
this is the checkbox with a larger css width and height:
Both sites use <input type="checkbox">
833
By default, browsers have their own UI style, but you can use CSS to style the checkbox and create a unique look for your website or app.
You can't style a disabled checkbox directly because it's controlled by the browser / OS. However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox".
Demonstrating checkbox checked red background color using CSS. Use the accent-color property to change the checkbox color in CSS.
I figured it out. The other site was zoomed slightly in Chrome. The CSS style to flip to the alternate rendering is...zoom.
zoom: 1.1
73
It seems to be the case that the latest chrome and IE, im contrast to Firefox is able to scale checkboxes and radio buttons to the required width and height.
The following code will scale the radios and checkboxes to 50px x 50px large checkboxes.
input[type=radio], input[type=checkbox] {
height: 50px; width: 50px;
}
Please compare the appearance in different browsers: https://jsfiddle.net/t9q0mny2/
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
