De-aquify Safari form elements

May 4, 2005 8:14 PM

Is there any app or modification I can make to safari to have the form elements render in the way the page designer intended rather than with aqua UI elements? I tried to look around but couldn't find a hack for it.
posted by rhyax to computers & internet (10 comments total)

What do you mean the way the designer intended? Standard widgets are different in different versions of Windows, in Linux, in different browsers... That the aqua widgets are loud doesn't necessarily mean they are wrong.

Well, (IIRC--I'm not a Mac owner) they're rounded, which perhaps isn't right, but I'm not sure what you're asking. You want them to be grey? Or maybe that there is some CSS that isn't being applied? That would be a problem.
posted by maledictory at 8:46 PM on May 4, 2005

The short answer is no -- since the long answer is that the form designer intended for the browser to use its built-in form elements, and while other OS X browsers don't use Aqua elements, Safari does.

That is to say: when you say "the way the page designer intended," you're being disingenuous, since the page designer doesn't in any way specify what specific visual effect is used in pulldowns, checkboxes, and the like. (How exactly would they? <input type="checkbox" name="foo" value="1" effect="square-non-aqua-pretty" />?) You're just more used to the non-Safari way, but that's only because non-Safari browsers use different visual widgets than Safari does.
posted by delfuego at 8:47 PM on May 4, 2005

Well, i agree I am being a little snotty with that phrase, it is due to my displeasure with how it works. I am mainly talking about buttons, and other input items. For example, matt has made the buttons on this page the same color yellow as the link text, which looks nice. Unfortunately, Safari renders those buttons as silver aqua UI elements, which I don't like. Wordpress applies some size and spacing styles to the buttons which are also ignored.

I think what you both are saying is that I am just not used to the safari way of displaying, but that is is no less modifiable than other browsers. That is incorrect. Most browsers allow style information on forms and input elements, while safari overrides these styles and uses aqua style elements.
posted by rhyax at 8:59 PM on May 4, 2005

Saab's website features CSS that overrides form element styles. You might steal inspiration from them.

You can also create a custom userContent.css file which overrides form and input elements. Save userContent.css somewhere convenient (I suggest home:Library:Safari) and then launch Safari. Go to the Preferences... menu item, and choose the Advanced tab. Use the stylesheet popup to choose the new userContent.css file. There is no need to restart Safari - it will immediately apply the stylesheet to all pages.
posted by AlexReynolds at 9:15 PM on May 4, 2005

I did note that if it was ignoring CSS it would be a problem.

Indeed, that is a good argument against the Aqua widgets--would a style of yellow lead to yellow gel buttons? Would certain text colours be hard to read given the default shininess?--and thus you're left with the lowest common denominator of grey squares as easily modifiable.

It would be good if the buttons were grey such that one were able to style elements and yet remain consistent and legible... otherwise you might have to do things like, upon application of a background colour, move from aqua-style to regular yellow squares. However that wouldn't be technically wrong. It was more the word 'intention' that you used, and given the lack of spec a wish for a grey button as default could be an expectation but not an intention.
posted by maledictory at 9:17 PM on May 4, 2005

You could always use linked images rather than UI elements.
posted by angry modem at 10:46 PM on May 4, 2005

Look here, dudes, he's not trying to develop a web page himself here, he's just trying to see the yellow buttons on Metafilter.

The question is: "Safari seems to ignore perfectly valid css styles on some form elements, using its ugly-ass Aqua equivalents inappropriately instead. How can I make this program Do The Right Thing?"

This sounds like another case where Apple has screwed someone over! I'd suggest filing a bug.
posted by breath at 11:17 PM on May 4, 2005

Styling form controls and styling even more form controls.
posted by kirkaracha at 11:27 PM on May 4, 2005

Aqua buttons and controls are correct. This way they are recognizable as buttons and controls, rather than being subject to the whims of Web designers, who are prone to wanting to make them look like things other than what they are for silly reasons like "it looks better."
posted by kindall at 12:39 AM on May 5, 2005

The question is: "Safari seems to ignore perfectly valid css styles on some form elements, using its ugly-ass Aqua equivalents inappropriately instead. How can I make this program Do The Right Thing?"

From the standard:

CSS2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

So a browser can still claim to conform even if it completely ignores styling of form controls. And the standard even warns you (the author) that your nifty green buttons are an experimental technology and subject to change.

Personally, I rather hate when over zealous designers hijack my UI elements.
posted by sbutler at 7:51 AM on May 5, 2005