The CSS Summit: CSS & Form Elements

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    2 Favorites

    The CSS Summit: CSS & Form Elements - Presentation Transcript

    1. CSS & WEB FORM ELEMENTS Christopher Schmitt | http://twitter.com/teleject
    2. http://brightbytes.com/phineasgage/index.html
    3. ( )= / ( )
    4. FORM ELEMENTS • Checkboxes • Select: • Input: • Multiple Items • File • Single Item • Radio • Submit Button • Text • Textarea
    5. CSS PROPERTIES • background-color • height • background-image • letter-spacing • border • line-height • border-color • margin • border-style • padding • border-width • text-align • color • text-decoration • font-family • text-indent • font-size • width • font-weight • word-spacing
    6. 7.2 5 8.5 1.5 3 1 5.5 9 2.0 4b 6 3.0 7 8b2 7.2 9 1.5 2 2.0 3 3.0 4b
    7. 3,520 screengrabs
    8. RADIO BUTTONS
    9. CSS HEIGHT FF 2 FF 2 FF 3 Chrome 1
    10. CSS WIDTH FF 3 FF 3 Safari 3 Safari 3 Safari 4b Safari 4b
    11. CSS TEXT INDENT Chrome 1 Safari 4b Safari 4b Opera 9 Opera 9
    12. CSS BACKGROUND COLOR IE 6 IE 7 IE 8b2 Opera 9 Opera 9
    13. CSS BACKGROUND IMG Firefox 2 Firefox 2 IE 6 IE 7 IE 8b2 Opera 9 Opera 9
    14. CSS & TEXTAREA 20 15 10 5 0 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
    15. CSS & INPUT TEXT FIELDS 20 15 10 5 0 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
    16. CSS & SUBMIT BUTTON 20 15 10 5 0 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
    17. CSS & SELECT BOXES (ONE) 20 15 10 5 0 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
    18. CSS & SELECT BOXES (MULTI) 20 15 10 5 0 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
    19. CSS & FILE UPLOADS 20 15 10 5 0 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
    20. CSS & CHECKBOXES 20 15 10 5 0 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
    21. CSS & RADIO BUTTONS 20 15 10 5 0 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
    22. Radio Check File Select Select Input Text Buttons Boxes Uploads (Multi) (One) Text Area
    23. CSS PROPERTIES 100 75 50 25 0 height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing Y N S N/A
    24. CSS PROPERTIES 100 75 50 25 0 bkgd-color bkgd-image border border-color border-style border-width color font-family font-size font-weight Y N S N/A
    25. Text Indent Font Family Height Font Size Margin Text Border Color Color Border Style Background Decoration Color Font Weight Background Letter Spacing Image Width Word Spacing Padding Border
    26. Radio Check File Select Select Input Text Buttons Boxes Uploads (Multi) (One) Text Area Text Indent Font Family Height Font Size Margin Text Border Color Color Border Style Background Decoration Color Font Weight Background Letter Spacing Image Width Word Spacing Padding Border
    27. MacFF3 MacS4b WinOp9 WinS3 IE7 IE6 Chrome WinS4b WinFF3 IE8b2 MacS3 Radio Check File Select Select Input Text Buttons Boxes Uploads (Multi) (One) Text Area Text Indent Font Family Height Font Size Margin Text Border Color Color Border Style Background Decoration Color Font Weight Background Letter Spacing Image Width Word Spacing Padding Border
    28. 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
    29. 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
    30. HOW TO DESIGN FOR SERIOUSLY MESSY FORMS
    31. SURRENDER
    32. ZERO OUT CSS PROPERTIES • 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
    33. SLOW WAY TO ZERO <input type="submit" value="submit" class="submit" />
    34. FASTER WAY TO ZERO input { /* type selector */ border: 1px solid black; } .submit { /* class selector */ border: 1px solid black; }
    35. 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; }
    36. FASTER WAY TO ZERO label[for="byear"], label[for="bdate"] { position: absolute; left: -999px; width: 990px; }
    37. DROP SHADOWS, ROUNDED CORNERS, OH MY!
    38. 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>
    39. 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>
    40. BASIC FORM #webmailForm fieldset { margin: 0 0 15px 0; border: 0; } #webmailForm fieldset label { display: block; margin: 0 0 5px 0; font-weight: bold; }
    41. COOL FORM #webmailForm fieldset input, #webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; }
    42. 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; }
    43. 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; }
    44. 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; }
    45. OTHER CSS3 PROPERTIES
    46. ENABLED & DISABLED FORM 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>
    47. ENABLED & DISABLED FORM ELEMENTS
    48. ENABLED & DISABLED FORM ELEMENTS input[type="text"]:disabled{ opacity: .7; filter: alpha(opacity=70); /* cough */ }
    49. ENABLED & DISABLED FORM ELEMENTS input[type="text"]:disabled:after { content: "(disabled - do not use)"; font-size: .9em; color: #CCCCCC; display: block; }
    50. ENABLED & DISABLED FORM ELEMENTS
    51. ENABLED & DISABLED FORM ELEMENTS option:enabled{ color: #9F393F; } input:enabled{ background: #21B6A8; color:#9F393F; }
    52. ENABLED & DISABLED FORM ELEMENTS
    53. CHECKED RADIO FORM ELEMENTS input[type="radio"]:checked{ background: #9F393F; }
    54. CHECKED RADIO FORM ELEMENTS
    55. THAT’S IT...
    56. 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
    57. 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! • Letbrowser vendors hear you or they won’t care to fix the problem. • With HTML5 form elements, problem is going to get worse.
    58. ...AND STOP ADAPTING.
    59. THANK YOU! Christopher Schmitt schmitt@heatvision.com @teleject on twitter
    60. CREATIVE COMMONS CITATIONS http://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/

    + Christopher SchmittChristopher Schmitt, 3 months ago

    custom

    1049 views, 2 favs, 0 embeds more stats

    Although forms make the Web go around, they are oft more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1049
      • 1049 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 2
    • Downloads 23
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories