Finally, cross-browser visual control over forms.

Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:

I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.

10 thoughts on “Finally, cross-browser visual control over forms.

  1. This is really interesting because issues with forms was entirely based on designers way how to design forms and never related to the need of the form.

    I have even used form design from badboy.ro forced to make form look in a specific way when the initial problem is not look but usability and functionality.

    Anything new should be tested and valued by the people actually uding it but also developing it in order to understand whats needed, functional and used.

    Thanks for a great article again.

    Michael Persson

  2. without changing them so drastically as to appear foreign in a user’s operating system

    That bit of the spiel niggles. Rounded buttons, blue glows, glassy widgets… come on, they’re Mac-inspired and I think they will look foreign on PCs. Whether anyone will actually care is another question – I just think people should be realistic about where the design cues come from :)

  3. I still don’t see why designers feel the need to override the browser all the time. Sure I can see the desire to have your form controls look like they did in your flats, or that they fit with your design, but far too often we forget that our page, application site whatever is already running in an application.

    Browsers have their own unique features and design styles themselves, every time we take a browser control and modify it we’re changing the design work of someone else.

    How many times have you handed off a design and it come back changed? It’s heartbreaking right? Imagine the guy who designed the button submit, or select control for Safari and how he must feel whenever he sees it swapped out for something else. It’s like you keep telling him his design was wrong and yours is better.

    Yes, I completely understand the want for styling browser form elements for your won desires, but you could also think about how to embrace them in your design because every one of them is different!

    We are becoming very comfortable with the acknowledgement that there is a core difference between mobile and desktop interfaces and interactions, I think it is time to steer harder at the barrier between browsers and bust through. Don’t forget that the only person who flips between multiple browsers all day are web designers. OK, quite a broad brush stroke but on the whole it is a pretty accurate statement.

  4. How many times have you handed off a design and it come back changed? It’s heartbreaking right?

    Yes, sort of like when you design a page that has a form on it, with cohesively-styled form elements, only to have the browser swap them out for something else. How is overriding the default styles of form elements (within reason) altogether different than overriding the default browser styles of other page elements, which is commonplace? And while this library doesn’t directly address the issue (and has some quirks of its own), it could certainly be useful as a starting point for harmonizing the appearance of a form within the context of a styled page.

  5. This is nice as a standardized library but I’m not sure how I feel about selecting a Date or Datetime with a spinner. Seems pretty inefficient…although I haven’t looked at the spec for how they are expected to behave.
    Another issue I see on chrome 7 on mac is the number field defaulting to 1.7976931348623157e+308 whenever I try to use the spinner, but typing any other number makes it behave as expected with the spinner.

    All the same, a decent library, I could see using this in some projects coming up

  6. Don’t get me wrong, It is always really nice to see anyone looking at a problem and coming up with a fantastic packaged solution such as this one.

    @Justin, your right that it is ideal to harmonize within the page. What I was hoping to emphasize is that if we spent less time trying to change how a browser works and more time looking at the core things like whether a page works to its fullest and that there are familiar objects on that page for people to interact with, a submit button for example, then we would also spend less time making sure that a library like this or any other method works across a hand full of desktop browsers, perhaps checking it on mobile, screen readers and other devices.

    I think it may just be where I come from, I am not a web designer I just build things based on speed of completion which does mean I often leave embellishments like this out. I would never say they’re a bad thing and I can see that in a heavily designed site or page you want to create your own devices for achieving common tasks.

    @Lauri That is a very similar question to whether we still need back buttons when the browser already has one. On many an occasion the answer will be no, but you never know when it is important, particular with certain caching systems where even a force refresh will return populated form data. A lot of banking sites do this so you have to tell it to essentially flush the cached page.

  7. hmm… Unless you live under a rock you should know about Nicevofrms v2 that do much more. Here guy just styled form a bit.

    Niceforms give u ability to add background to every form element including file input. and keep it full functional.

Comments are closed.