Page 1 of 1

Safari Checkbox CSS Trick

Posted: Tue Oct 07, 2008 7:53 pm
by volomike
I made an accidental discovery today with Safari and Cascading Style Sheets (CSS). If you use Safari, you know that they have these annoying, inky-dinky checkbox sizes. On really large displays, these checkboxes are almost hard to click. Try this on the CSS for your checkboxes and then look at them in Safari:

Code: Select all

-webkit-transform: scale(1.3,1.3);

Re: Safari Checkbox CSS Trick

Posted: Wed Oct 08, 2008 9:30 am
by Mds
I didn't use Safari so far.
How do you like it ? Image

Re: Safari Checkbox CSS Trick

Posted: Wed Oct 08, 2008 12:34 pm
by volomike
Mds wrote:I didn't use Safari so far.
How do you like it
I don't like Safari, actually. I know it's the fastest browser out there, but it's got quirks. Sometimes I have hyperlinks where underlines go across the screen in unpredictable ways. I also don't like the fuzzy blue border around selected fields, nor the tiny checkboxes. The tab interface was odder than the convenience of Firefox -- you have to doubleclick an area next to a tab in order to create a new one, or use a keystroke.

The only reason I worry about Safari is because I am a PHP Freelancer, so I need to test against:

- IE6 (argh -- hate this thing)
- IE7 (hate this too, but not as much as IE6)
- FF2 and 3
- Opera (latest)
- Safari (latest)

I don't have a Mac, so I have to do my Safari testing on Windows, which is fairly close to the way it would be on a Mac.

Re: Safari Checkbox CSS Trick

Posted: Wed Oct 08, 2008 8:29 pm
by Mds
Well, I think if we hew CSS and HTML Standards, we shouldn't worry about browsers( except old browsers ) Image

Re: Safari Checkbox CSS Trick

Posted: Thu Jan 15, 2009 2:51 pm
by shazam-fu
How did you ever figure that out? Thank you!

Re: Safari Checkbox CSS Trick

Posted: Thu Jan 15, 2009 3:13 pm
by volomike
shazam-fu wrote:How did you ever figure that out? Thank you!
Some things just happen by listing out all the available properties on a particular browser platform, trying each one out, and looking at the effect. That's what I did on the webkit platform until I finally discovered this trick.

Re: Safari Checkbox CSS Trick

Posted: Thu Jan 15, 2009 5:48 pm
by Syntac
You can eliminate the fuzzy blue thingy ("focus ring" in Apple GUI parlance) by setting the CSS property "outline" to "none". Last I checked, you also need to change the border or this will have no effect. (Or maybe I'm just having cause-and-effect issues?)

Re: Safari Checkbox CSS Trick

Posted: Thu Jan 15, 2009 7:16 pm
by volomike
Syntac wrote:You can eliminate the fuzzy blue thingy ("focus ring" in Apple GUI parlance) by setting the CSS property "outline" to "none". Last I checked, you also need to change the border or this will have no effect. (Or maybe I'm just having cause-and-effect issues?)
Yeah, I had been wanting to play with that, but had not gotten around to it. I think that it's rude of these browser vendors to do anything special with the fields. Do they not know that with jQuery and existing field properties that we would not be doing this ourselves and in our own desirable way?