How put glow on textfield using HTML5 and CSS3 [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 7 years ago.

开发者_如何学JAVA Improve this question

How can i put glow effects on textfield using HTML5 and CSS3 when active like http://www.me.com

---

:focus { box-shadow: 0 0 10px red; } for a red glow. Essentially a glow is a drop shadow with a suitable color and no offset.

---

You'll find they use a combination of JavaScript with CSS3 to create this effect.

They will have an event handler that handles the onfocus state of the textbox and then use the CSS3 box-shadow style along with a Javascript fade effect,

The best (easiest) way to achieve this would be to combine jQuery with CSS3 properties, But can also be done in raw JS at the same time, If you need further explanation just leave a comment.

---

They use png image for div which is moved behind input field and hidden when there's no focus. Everything has fixed width and height so no imege resizing needed.

Didn't see any CSS3 or HTML5 there but to do it with CSS3 than with border-image it should be possible to achieve the same effect, something like:

border-image: url("border.png") 10;

Edit:

@Lea Verou has better solution. I added this effect to one of my sites yesterday like this

input:focus, textarea:focus,
input.ieFocusHack, textarea.ieFocusHack {
    box-shadow: 0 0 10px rgb(0, 182, 255);
    -moz-box-shadow: 0 0 10px rgb(0, 182, 255);
    -webkit-box-shadow: 0 0 10px rgb(0, 182, 255);
    behavior: url(PIE.htc);
}

input[type="submit"]:focus {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Some javascript (didn't write it myself) for IE as it doesn't support :focus

$(document).ready(function() {
    if (jQuery.browser.msie === true) {
        jQuery('input, textarea')
                .bind('focus', function() {
                        $(this).addClass('ieFocusHack');
                }).bind('blur', function() {
                        $(this).removeClass('ieFocusHack');
                });
    }
});

To add box-shadow support to IE used CSS3PIE. Works like a charm.