How do I make the glow around a text field?

Hey!

I want to make a glow around a text field like they have here on DP and also on twitter.com. I've been trying to figure it out but keep failing Any ideas on how to make the glow?

Thanks!

 

I believe you will need to do image replacement? However it would be done, with CSS or Javascript, on click of the text field, it will change the image to one with the glow. I'm not sure how exactly to do so because I haven't really touched forms before, but I'm sure you can define a background image for the form field, and then a hover image too.

 

This could simply be achieved by changing the border of the text box when the user clicks on it using the :focus pseudo class in CSS.

 

Simple CSS3 properties can achieve this effect.

On :focus you just could add:

textarea:focus {
-moz-box-shadow: 0 0 12px #888;
-webkit-box-shadow: 0 0 12px #888;
-o-box-shadow: 0 0 12px #888;
box-shadow: 0 0 12px #888;
}

Code (markup):

to your CSS file (textarea or whatever you use)

Use Google to find out more about CSS3 properties and how to use them, pros and cons, ...

 

IE doesn't support CSS3 though, neigther does opera based on a chart I found in google, at least, not the border properties. webresourcesdepot.com/html5-and-css3-browser-compatibility-chart/

 

I know that but who cares about IE? I don't. People that are using IE always have a layout that is not that "fancy" as modern browsers will render. The functions are the same.
That's how it is.

 

IE is still a big name in the biz simply because it has a huge market share . We can't simply ignore the dam frying pan .

 

As I said above, the functions are the same, only the "fancy" style is not!

 

http://dev.opera.com/articles/view/css3-border-background-boxshadow/

 

The chart I saw only went to Opera 10, and I would assume like other browsers, most of it's user base doesn't have the latest version yet.

Although, I agree, IE does blow and I wish people only used other browsers. I use FF .

Based on w3schools.com/browsers/browsers_stats.asp for November 2010, only 28.6% of users user IE, and 4.1% use IE6. A whopping 2.3% use Opera and 2.1% use Opera 10, they do not show statistics for Opera 11 yet.

So taking care of IE still has some value, but IE user base is declining!

 

W3C does (and can not) track everyone... but the "trend" is nearly correct, I guess.

Anyway... as long as the functions are the same, I do not style anything for IE.

 

I agree, I make sure that the margins and stuff are correct for IE but unnecessary styles that just make things too complicated in IE. Maybe someday it will use real standards.

Anyways, thanks for all the help so far!