Safari Checkbox CSS Trick

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Safari Checkbox CSS Trick

Post 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);
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: Safari Checkbox CSS Trick

Post by Mds »

I didn't use Safari so far.
How do you like it ? Image
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Safari Checkbox CSS Trick

Post 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.
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: Safari Checkbox CSS Trick

Post by Mds »

Well, I think if we hew CSS and HTML Standards, we shouldn't worry about browsers( except old browsers ) Image
shazam-fu
Forum Newbie
Posts: 8
Joined: Mon Feb 23, 2004 1:22 pm

Re: Safari Checkbox CSS Trick

Post by shazam-fu »

How did you ever figure that out? Thank you!
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Safari Checkbox CSS Trick

Post 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.
User avatar
Syntac
Forum Contributor
Posts: 327
Joined: Sun Sep 14, 2008 7:59 pm

Re: Safari Checkbox CSS Trick

Post 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?)
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Safari Checkbox CSS Trick

Post 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?
Post Reply