CSS for fuzzy outline around input elements

Question

Listed below are the possible circuit styles that I know of.

• dotted line
• dotted
• solid
• double
• groove
• crest
• insert
• outset

None of them create a diagram around an input element, as shown below:
With what CSS style can someone style an input element as shown above?

Answer 1

this is similar to the default browser behavior, but you can fake it with css3 box-shadow

http://jsfiddle.net/meo/BndwU/

or with your colors: http://jsfiddle.net/meo/BndwU/1/

or with bonus focus animation: http://jsfiddle.net/meo/BndwU/2/

Answer 2

, CSS3, box-shadow:

input[type="text"] {
    background:white;
    border:1px solid #ffcc00;
    box-shadow:0 0 3px #ffcc00;
    -moz-box-shadow:0 0 3px #ffcc00;
    -webkit-box-shadow:0 0 3px #ffcc00;
}

See example →

Answer 3

Using the new CSS 3 shadow shadow, you can put a gradient frame around the input window. First wrap it in the gap with a new class that contains something like:

.coolio {
  box-shadow:rgba(0,0,0,0.5) 0px 0px 24px; 
}

Here is a working example: Gradient Shadow demographic chart