Fix WebKit Checkbox Overflow
I want to share a quick tip about working with checkboxes in Chrome and Safari, the WebKit-based browsers. I was recently working with a series of checkboxes when I noticed that Safari and Chrome were doing some funky "cut off" with them:
What's even weirder is that they were randomly fix and unfix themselves as you hover over them. Horrible! After a bit of tinkering, I discovered the solution was adding a line-height
of 20px
to the parent the checkbox:
.checkboxList li { /* ..or whatever the parent is */ line-height: 20px; }
Twenty pixels should be considered the minimum -- anything smaller wont prevent the problem completely.
This actually didn’t work for me. I had to give the checkboxes display:block and a height of 20px.