Tags
- CSS (11)
- Design (7)
- HTML (7)
- Inspiration (6)
- Links Roundup (6)
- Typography (6)
- illustration (6)
- Creativeness (5)
- Development (4)
- Javascript (4)
- View all 69 tags
- Links (3)
- Tutorial (3)
- Markup (2)
- Minimalist (2)
- Tips (2)
- Vintage (2)
- Xmas (2)
- jQuery (2)
- progressive enrichment (2)
- retro (2)
- Badge (1)
- Bookmarklet (1)
- Cards (1)
- Christmas (1)
- DOM (1)
- Date (1)
- Drop Caps (1)
- Illustrator (1)
- Link (1)
- PHP (1)
- Pizza by the slice (1)
- Redesign (1)
- Roy Doty (1)
- Twitter (1)
- UI (1)
- UX (1)
- Vector (1)
- Wordpress (1)
- accessibility (1)
- adjacent sibling selector (1)
- animation (1)
- barack (1)
- bug (1)
- clearfix (1)
- collage (1)
- color (1)
- css 3 (1)
- easy-clearing (1)
- election (1)
- form (1)
- group (1)
- halloween (1)
- ie7 (1)
- image editor (1)
- label (1)
- obama (1)
- photoshop (1)
- portfolio (1)
- progressive enhancement (1)
- pumpkin (1)
- rgba (1)
- roundup (1)
- scroll (1)
- spooky (1)
- steampunk (1)
- tools (1)
- tooltip (1)
- webkit (1)
- yes we can (1)
Archive
July 1st, 7:41pm
0 comments
Nice input labels using jQuery and CSS
Nowadays it's very common to find websites "hiding" form labels in favor of input's default text. Even tough it's a cleaver idea, there is a better way to accomplish the same result without compromising accessibility.
First step is to create the form. I usually have all my forms inside a list:
UPDATE: It's necessary to turn off the "autocomplete" so the inputs don't get messed up.
Markup
Don't forget the "for" attribute, the script will rely on it. Go ahead and add the following CSS:
