Adding Glow Effect to Input Boxes and Buttons

html css forms input glow

Mae Guff · Aug 3, 2011 · Viewed 9.4k times · Source

I'm in the middle of making my html form, and I want to add effects on it.

Is it possible for <input name="" type="text" class="" /> to have a glow effect?

Would it also be possible for the submit button to have this effect as well?

Answer

This Works for all inputs of class Button

input.Button {
-moz-box-shadow: 0px 0px 10px Green;
-webkit-box-shadow: 0px 0px 10px Green;
box-shadow: 0px 0px 10px Green;
}

Per @Imoda

This works for all inputs of type text

input[type='text'] {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

And to get it only on hover:

input[type='text']:hover {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}