Experimenting With Highlighting

Friday, February 27, 2004 at 12:36 pm | Comments off

form highlighting example

I decided to have a little fun yesterday and worked up a "highlighting" effect for the form fields on this site. I got the idea while I was installing Apple iTunes on my computer, as they used a similar effect for the registration form. I used JavaScript to trigger a function onfocus, which simply sets up some background images on it's various container elements. I used a technique similar to this one to create the borders.

Not sure if people will find it helpful and a nice little touch, or just annoying. What do you think?

Edit: I've now written up a short article on this technique.

Comments

Matt Brubeck
February 27th, 2004
4:13 PM | #

Very nice! It would be really great if there were a way to apply similar styles to LABEL elements of focused checkboxes and radio buttons, but I think that this might require CSS 3.

DarkBlue
February 27th, 2004
4:56 PM | #

That looks pretty cool Ryan. I wonder, can you preload the images in some way - as there is a pronounced lag (for me anyway) between focusing on the first element and the highlight being drawn?

Obviously, I wouldn't expect to see this again now the images are cached though. Elements 2, 3 & 4 all highlighted instantly.

DanieLTomaS
February 27th, 2004
5:12 PM | #

Like DarkBlue said, there is a definite lag between clicking on the textbox and the textbox lighting up. Also, i think it would add more effect if there was also a hover effect.. maybe a light orange or sumthing...
-Dan

Ryan
February 27th, 2004
5:27 PM | #

Ok, I believe I've fixed the preload issue. I should have done it before I even uploaded it, as I was aware of it. Anyway, let me know if it is still a problem for you (though as DarkBlue said, the images will probably be cached - you'd have to empty your cache to notice). Seemed to work here, both when I cleared my cache, and when I used different browsers.

DarkBlue
February 27th, 2004
5:39 PM | #

Holy smoke batman! Now it looks the business. The preloading works a treat.

Ryan, do you mind if I use this on my site - I would obviously give full credit?

Ryan
February 27th, 2004
5:53 PM | #

No, I don't mind at all - knock yourself out. :)

DarkBlue
February 27th, 2004
5:54 PM | #

That's very kind Ryan. Thank you.

Tim
February 27th, 2004
6:25 PM | #

Funny you should mention the field focus, I just recently read
an article at Sitepoint about this very same thing. You can
(theoritically) accomplish it without Javascript by using the :focus
pseudo-class. Of course, IE doesn't recognize that....

The full article can be found at
http://www.sitepoint.com/article/simple-tricks-usable-forms

Ryan
February 27th, 2004
6:56 PM | #

Yes, I had thought about using the :focus pseudo-class, but as you said, it won't work in IE, and I (obviously) like to support as many browsers as possible. If IE were to have less of a market share, we wouldn't have to worry about it quite as much, but that just isn't the case at this time...

Aaron Schaefer
February 27th, 2004
10:23 PM | #

Very nice effect indeed...

Justin French
February 28th, 2004
1:06 AM | #

Ryan, nice, but in Safari (1.0), there seems to be some glitches... the left border of each field 'sticks on' after it loses focus, and for me, the right border of each field is repeatedon the far right of each field's containing block... email me for a screen grab if needed.

Works seemlessly on Firefox 0.8 and IE5 under OSX though!

J. Cole
February 28th, 2004
2:45 AM | #

Even more helpful might be using this to highlight unfilled required elements... maybe match the color to the red you use in the "Please fill out..." text.

Ryan
February 28th, 2004
12:00 PM | #

Justin, I tried emailing you twice, but they bounced both times. I would appreciate a screenshot of what's going on in Safari, thought.

Chris
February 28th, 2004
7:29 PM | #

Is there a download for this?

Justin French
February 29th, 2004
3:04 AM | #

Ryan, have emailed you a grab and some comments. Interestingly, you're also competing with Safari's own default active field styling, which is also creating some weird double-active effects. You also have no way of knowing )today, or in the future), if other browsers choose to use their own :focus styling.

Personally, I would stick with :focus, which would work on all standards compliant browsers, would be ignored by those (like Safari) who aren't compliant, or choose to use thier own focus effect.

If you REALLY wanted to target IE browsers on top of a pure CSS :focus solution, you could have a separate style sheet exclusively for IE (hidden from all others with an IE-only conditional comment).

PunkSktBrdr01
February 29th, 2004
5:29 PM | #

Wow, this looks awesome! I'd stick to using :focus, since the site will still work perfectly even if the border doesn't appear.

Tom
February 29th, 2004
5:34 PM | #

Wow, very nice effect.

Oh yeah, I don't think it's possible with the :active pseudoclass because of the DIV hook that Ryan's using. Not sure though.

DanieLTomaS
February 29th, 2004
5:42 PM | #

I tested it on all 6 of my browsers(Opera, Mozilla Firefox 0.8, Mozilla Firebird 0.7(no longer available, switched to Firefox), Netscape 7.1, Internet Explorer 6, Mozilla). It worked great on all of them, except Opera, which doesnt do anything when focused.
-Dan

Terribrill
February 29th, 2004
8:31 PM | #

WOW,

That is like SO cool. I really like it.

Jordon

Ryan
February 29th, 2004
11:16 PM | #

For those interested, I've posted an article explaining how I did this, and included a .zip of all the necessary files.

I'm still planning to try to fix the Safari error that Justin mentioned, though I'm not sure when that will be, as we're in the process of changing our DSL provider, and it looks we'll be offline for a bit.

John Bedard
March 9th, 2004
5:37 PM | #

Hey, nice job. That could be a very nice enhancement to navigating form field-heavy pages in web-based applications.

John

Jim
March 30th, 2004
7:19 PM | #

Very nice, except it doesnt seem to work in Opera 7.21, which is a shame.

I tested in IE 6 to check if you had turned the feature off, but it worked perfectly in that.

Jim

Ryan
March 30th, 2004
10:33 PM | #

Jim, as far as I can tell, it is actually a bug with Opera 7.2x. See http://www.ryanbrill.com/archives/opera-72x-bug/ for more info.

Comments are automatically closed after 45 days