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.
![6 Things You Didn’t Know About Firefox OS]()
Firefox OS is all over the tech news and for good reason: Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript. Firefox OS has been rapidly improving...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Scroll IFRAMEs on iOS]()
For the longest time, developers were frustrated by elements with overflow not being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I display my demos in sandboxed IFRAMEs on top of the article itself, so as to not affect my site's...
![CSS Counters]()
Counters. They were a staple of the Geocities / early web scene that many of us "older" developers grew up with; a feature then, the butt of web jokes now. CSS has implemented its own type of counter, one more sane and straight-forward than the ole...
This actually didn’t work for me. I had to give the checkboxes display:block and a height of 20px.