Adding Glow Effect to Input Boxes and Buttons

Question

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?

What do you mean by a 'glow effect'? Changing border color when you hover over the elements? — Veger, Aug 03 '11 at 15:15
possible duplicate: http://stackoverflow.com/questions/6422790/css-create-white-glow-around-image — js1568, Aug 03 '11 at 15:16
@Veger: yup, something like that. When a user clicks or starts to input text, the box glows, similar to outer glow in photoshop. — Mae Guff, Aug 03 '11 at 15:52
@js1568: this is a different matter to the question you linked. :) — Mae Guff, Aug 03 '11 at 15:53

normanthesquid · Answer 1 · 2011-08-03T19:27:14.170

2

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;
}

edited Aug 03 '11 at 19:27

answered Aug 03 '11 at 15:14

normanthesquid

690
1
6
21

What browser are you using? It works just fine in modern browsers. – Nightfirecat Aug 03 '11 at 17:47
@Mae Guff try it with `input[type="text"] { ... }` as your selector instead. – Steve Robbins Aug 03 '11 at 19:04

score 0 · Answer 2 · edited Aug 03 '11 at 17:49

0

You can create objects or artwork via Photoshop or Fireworks, then import that graphic into your development with your CSS file. Example:

div#btn {
background-position: top right;
position:absolute; */
margin:0px 0px; padding:0px;
text-align:center;
background-image: url(images/bg1.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
}

Then in your HTML, just call that div on your button.

edited Aug 03 '11 at 17:49

Nightfirecat

11,432
6
35
51

answered Aug 03 '11 at 15:16

Zero

287
1
5
17

Thanks for the reply. I guess this can be applied to buttons, but i like to have this glow effect in action. I mean, when the user hovers or starts to type then the input box glows :) – Mae Guff Aug 03 '11 at 16:02

score 0 · Answer 3 · answered Aug 03 '11 at 19:00

This will select your inputs that are the "text" type. Then change the #FFFFFF to whatever colour you wish. In theory this should work. If it doesn't, add inset directly after each colon. It's not an exact outer-glow replication, but I believe it'll suit your needs.


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

Adding Glow Effect to Input Boxes and Buttons

3 Answers3