Top 14 Form Usability Tips

11. Use design to help the user

Use large font in text fields

Email address
default browser font-size

Email address
CSS font-size

input[type="checkbox"] {transform:scale(1.5);margin:4px;}
input[type="radio"] {transform:scale(1.5);margin:4px;}

input {font-size: 1.5em;}

beware IOS - if font size > 15px then IOS disables autozoom

Beef up ALL borders - PLEASE!

Luminosity Brighness of Enabled/Disabled Form Controls using default browser styling - Chrome, Safari, Firefox FAIL Contrast Check ;(

Change the label cursor

label { cursor: pointer; }

Highlight active and/or completed fields


no label


input:focus, input:hover {background:#FFFF00;} (highlites control from keyboard or mouse)
:required {border-left: red double 8px;}

An Ultimate Guide to CSS Pseudo-Classes and Pseudo-Elements

Distinguish primary and secondary actions

YES!! Primary action - Make it BIG and different. Make it FIRST!





You can easily style the following:

Style mostly. Your results may vary

No style

Resources for styling forms

Accessibility of Styled Form Controls

MDN HTML forms

Advanced CSS-Only Form Styling