San Bei Ji

Apply CSS to Safari Form Buttons

While the Aqua form elements in Safari are cool and all, I do sometimes wish I had the ability to apply CSS colors to the scroll bars and buttons. Well at least for the buttons, there’s a solution.

For form buttons, you can always use <button type="submit">Submit</button> method instead of the oft-used <input type="submit" value="Submit" /> method and get the same form submitting functionality. In Safari, this is rendered as a simple gray rectangle rather than the usual pretty Aqua-themed button. This display accepts CSS properties that the Aqua elements do not, such as font and background color.

As an added bonus, the <button> tag allows for richer content and rendering than using the <input> tag for the simple form button. The content in-between the button tags can be text, images, or a mix (which is a nice effect I might add). Alt text might even be included in your embedded form image, which is more than the <input> tag can handle when it’s type is set to image.

Tags: Mac OS X