the css summit: css & form elements

CSS & WEB FORM ELEMENTSChristopher Schmitt | http://twitter.com/teleject

http://brightbytes.com/phineasgage/index.html

( )= ( )/

• Checkboxes

• Input:

• File

• Radio

• Text

• Select:

• Multiple Items

• Single Item

• Submit Button

• Textarea

FORM ELEMENTS

CSS PROPERTIES

• background-color• background-image• border• border-color• border-style• border-width• color• font-family• font-size• font-weight

• height• letter-spacing• line-height• margin• padding• text-align• text-decoration• text-indent• width• word-spacing

7.2 55.567

8b2

8.59

1.52.03.0

34b

1

7.2 9 1.52.03.0

234b

3,520screengrabs

RADIO BUTTONS

CSS HEIGHT

FF 2

FF 2

FF 3

Chrome 1

CSS WIDTHFF 3

FF 3

Safari 3

Safari 3

Safari 4b

Safari 4b

CSS TEXT INDENTChrome 1

Safari 4b

Safari 4b

Opera 9

Opera 9

CSS BACKGROUND COLORIE 6

IE 7

IE 8b2

Opera 9

Opera 9

CSS BACKGROUND IMGFirefox 2

Firefox 2

IE 6

IE 7

IE 8b2

Opera 9

Opera 9

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & TEXTAREA

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & INPUT TEXT FIELDS

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & SUBMIT BUTTON

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & SELECT BOXES (ONE)

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & SELECT BOXES (MULTI)

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & FILE UPLOADS

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & CHECKBOXES

0

5

10

15

20

IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b

Yes No Somewhat N/A

CSS & RADIO BUTTONS

Radio Buttons

Check Boxes

File Uploads

Select(Multi)

Select(One)

Input Text

Text Area

0

25

50

75

100

height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing

Y N S N/A

CSS PROPERTIES

0

25

50

75

100

bkgd-color bkgd-image border border-color border-style border-width color font-family font-size font-weight

Y N S N/A

CSS PROPERTIES

Text Indent

Text Decoration

Font Family

Border Color

Font Weight

Word Spacing

Height

Color

Background Image

Border

Font Size

Border Style

Letter Spacing

Padding

Margin

Background Color

Width

Text Indent

Text Decoration

Font Family

Border Color

Font Weight

Word Spacing

Height

Color

Background Image

Border

Font Size

Border Style

Letter Spacing

Padding

Margin

Background Color

Width

Radio Buttons

Check Boxes

File Uploads

Select(Multi)

Select(One)

Input Text

Text Area

Text Indent

Text Decoration

Font Family

Border Color

Font Weight

Word Spacing

Height

Color

Background Image

Border

Font Size

Border Style

Letter Spacing

Padding

Margin

Background Color

Width

Radio Buttons

Check Boxes

File Uploads

Select(Multi)

Select(One)

Input Text

Text Area

MacFF3MacS4b

IE7 IE6 ChromeWinOp9

WinS4bWinS3

MacS3WinFF3 IE8b2

LET BROWSER VENDORS KNOW WHAT YOU WANT

• Internet Explorer

• http://blogs.msdn.com/ie/contact.aspx

• Opera

• http://my.opera.com/community/forums/forum.dml?id=24

• http://groups.google.com/group/opera.wishlist/topics

• Safari

• http://lists.webkit.org/mailman/listinfo/webkit-dev

• Google Chrome

• http://groups.google.com/group/chromium-dev

LET BROWSER VENDORS KNOW WHAT YOU WANT

• Web Form Elements Design Quiz

• Part 1: http://tr.im/lp2k

• Part 2: http://tr.im/lp2g

• http://www.WebFormElements.com/

• 3,500 form element screen captures

• HTML form element look-up tables (free):

• http://oreilly.com/catalog/9780596527419/appendixd/appd.pdf

HOW TO DESIGN FOR SERIOUSLY MESSY FORMS

SURRENDER

• Zero out Borders

• Zero out Padding

• Zero Margins

• Clear out Background Images, Color, etc.

• Then

• wrap INPUT element with DIVs and bring in the control

ZERO OUT CSS PROPERTIES

SLOW WAY TO ZERO

<input type="submit" value="submit" class="submit" />

FASTER WAY TO ZERO

input { /* type selector */ border: 1px solid black;}.submit { /* class selector */ border: 1px solid black;}

FASTER WAY TO ZERO

input[type="text"] { border: 1px solid #177F75; font-family:Verdana, Arial, Helvetica, sans-serif;}input[type="submit"] { margin-left: 201px; background-color : #00CC00;}input[type="text"], select { display: block; float: left; margin-bottom: 7px;}

FASTER WAY TO ZERO

label[for="byear"], label[for="bdate"] { position: absolute; left: -999px; width: 990px;}

DROP SHADOWS, ROUNDED CORNERS,

OH MY!

BASIC FORM<form id="webmailForm" action="/-/"> <fieldset> <label for="email">Email</label> <input id="email" type="text" value="a.graham@example.com" /> </fieldset> <fieldset> <label for="message">Message</label> <textarea id="comment">Mr. Watson -- come here.</textarea> </fieldset></form>

BASIC FORM<form id="webmailForm" action="/-/"> <fieldset> <label for="email">Email</label> <input id="email" type="text" value="a.graham@example.com" /> </fieldset> <fieldset> <label for="message">Message</label> <textarea id="comment">Mr. Watson -- come here.</textarea> </fieldset></form>

BASIC FORM

#webmailForm fieldset { margin: 0 0 15px 0; border: 0;}#webmailForm fieldset label { display: block; margin: 0 0 5px 0; font-weight: bold;}

COOL FORM

#webmailForm fieldset input,#webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; }

COOL FORM

#webmailForm fieldset input,#webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; background-image: url(form-bkgd2.png); background-repeat: repeat-x; }

COOL FORM

#webmailForm fieldset input,#webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; background-image: url(form-bkgd2.png); background-repeat: repeat-x; border-bottom: 1px solid #fff; border-right: 1px solid #fff; }

COOL FORM#webmailForm fieldset input,#webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; background-image: url(form-bkgd2.png); background-repeat: repeat-x; border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; }

OTHER CSS3 PROPERTIES

ENABLED & DISABLEDFORM ELEMENTS

<div>Enabled:<br /><input name="enabled" type="text" value="Hello, world!" /></div>

<div>Disabled:<br /><input name="disabled" type="text" value="Hello, world!" disabled="disabled" /></div>

ENABLED & DISABLEDFORM ELEMENTS

ENABLED & DISABLEDFORM ELEMENTS

input[type="text"]:disabled{ opacity: .7; filter : alpha(opacity=70); /* cough */}

ENABLED & DISABLEDFORM ELEMENTS

input[type="text"]:disabled:after { content: "(disabled - do not use)"; font-size: .9em; color : #CCCCCC; display: block;}

ENABLED & DISABLEDFORM ELEMENTS

ENABLED & DISABLEDFORM ELEMENTS

option:enabled{ color : #9F393F;}

input:enabled{ background: #21B6A8; color :#9F393F; }

ENABLED & DISABLEDFORM ELEMENTS

CHECKED RADIOFORM ELEMENTS

input[type="radio"]:checked{ background: #9F393F;}

CHECKED RADIOFORM ELEMENTS

THAT’S IT...

TAKE AWAYS

• Designing for forms is hard for HTML+CSS

• Even the same browser, different platform render Web forms differently

• To help you discern the safety of CSS on a Web form, use WebFormElements.com

• Reviewed which browsers are most hazardous

TAKE AWAYS

• Reviewed which CSS properties are supported the most.

• Reviewed what high-profile sites are doing to design for forms: Nothing.

• Call to action!

• Let browser vendors hear you or they won’t care to fix the problem.

• With HTML5 form elements, problem is going to get worse.

...AND STOP ADAPTING.

THANK YOU!Christopher Schmitt

schmitt@heatvision.com@teleject on twitter

CREATIVE COMMONS CITATIONShttp://www.flickr.com/photos/lanuiop/2234239588/

http://www.flickr.com/photos/gaetanlee/1947424580/http://www.flickr.com/photos/evapro/312900784/http://www.flickr.com/photos/kekka/799060449/

http://www.flickr.com/photos/hiddedevries/2594048276/http://www.flickr.com/photos/tomsaint/2992217972/