How is styling of Web Forms 2 going to work?

HTML & CSS
1

Caveat before we begin – I understand that most of the time you should NOT style form controls but instead allow the OS to pick their appearance for interface consistency reasons. That said, these situations do eventually arise.

For those not familiar with them, Web Forms 2 are things like calendars, time controls, and so on (link to the W3C draft - note that they’ve been folded into the HTML 5 spec for further dev but that introduction should get you started).

Currently only Opera supports them. This isn’t too much of a problem though - all browsers currently support the correct fallback behavior of treating them as a text field. From there javascript can find them and apply the behaviors - but that’s out of thread scope.

What I’m curious about is how are we going to style these? Ever tried to style a check box? It isn’t fun. So when a whole calendar is in the browser how are we going to be styling that thing?

I remember reading something the webkit team was working on that allowed styling of form pieces but it hasn’t been adopted yet and is still experimental.

I’m looking for info like that, but also some ideas on how it might be done. Who knows, maybe one of the browser dev team members reads here.

Note - I see little reason to style a radio button or checkbox - but you have to admit that a calendar is a much more significant piece of design territory to delegate to the browser default.

2

Sorry I 've only read briefly about the calendar control so I don’t really have any experience with it. Mark has a nice article here but doesn’t mention specific styling opportunities although the calendar looks quite flexible in its format options.

3

Related thought on the calendar control in particular. Consider an appointment scheduler - I need a date M-F. Will I be able to hide the weekends? What about date ranges?

4

Form elements have always been a pain and ignoring the accessibility issues you already mentioned I guess there should be some way to styles these new elements to fit into a design as they are not as simple as previous elements.

As you say you can do something with a non standard approach for webkit and indeed you can style most form elements in safari to be like what you want or indeed resemble other elements.

Here’s an example that styles the check box you mentioned.

View in Safari 5 only.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*http://css-infos.net/property/-webkit-appearance*/
input[type=checkbox] {
    -webkit-appearance:none;
    width:1em;
    height:1em;
    background:red;
    border-radius:20px;
    text-align:center;
    background:green;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f00), color-stop(1, #fcfcfc));
    -webkit-box-shadow: #aaa 0px 4px 10px;
    box-shadow: #aaa 0px 4px 10px;
    text-align:center;
    -webkit-background-clip:padding-box;
    -webkit-text-shadow:2px 2px 2px #333333;
    text-shadow:2px 2px 2px #333333;
    border:1px solid #000;
    font-size:98px;
    font-weight:bold;
    -webkit-transition: all 3s;
}
input[type=checkbox]:checked {
    background:blue;
}
input[type=checkbox]:checked:before {
    content:"\\221A";
    color:#fff;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div>
        <input type="checkbox" name="check1" id="check1" />
        <label for="check1">A checkbox</label>
    </div>
</form>
</body>
</html>

It uses -webit-appearance which can either remove the standard form style or indeed replace it with the style of another control.

I do have worries about authors abusing this but it would be nice to actually have the choice. Nothing is ever black or white and that includes form controls :slight_smile: