CSS for fuzzy outline around input elements

The possible outlin开发者_运维技巧e styles that I know of are shown below.

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

None of these puts an outline around an input element like shown below:

With what CSS stylling can someone style an input element like shown above?

it looks like a browser default behavior, but you can fake it with css3 box-shadow

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

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

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

This will only work in modern browsers that accept CSS3 properties like 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 →

Using the new CSS 3 box-shadow you can put a gradient border around an input box. First wrap it in a span 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 Outline Demo