How to change style of an input with javascript?

Question

I want to give a

-webkit-box-shadow:inset 0 0 5px black;

property to a text box as one focuses on it.

For example, here the background-color is being changed, but I want box-shadow instead.

<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>

and the HTML

<input type="text" onfocus="myFunction(this)">

Try jQuery perhaps? Especially if you're doing a lot of this kind of thing — Christian Stewart
– Christian Stewart, Commented Mar 13, 2013 at 18:33

Michael · Accepted Answer · 2013-03-13 18:35:25Z

3

Why not use :focus in CSS?

http://jsfiddle.net/VjLKV/

input {
    border: 1px solid black;
}

input:focus {
    outline: none;
    border: 1px solid black;
    -webkit-box-shadow:inset 0 0 5px black;
}

answered Mar 13, 2013 at 18:35

Michael

7,1022 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thakur Saksham Chauhan Over a year ago

Thankx. I didn't knew something like that exsisted. Sincerely, I am new to web designing and am 12 years old.

Michael Over a year ago

Wisdom: When I first started, I was under the general understanding that javascript could do anything, if it couldn't be done a different way, javascript was the solution. While this in some ways can be very true, I learned to first explore every other possible way, especially when it comes to stylistic things. If CSS can't do it, javascript/jquery probably can, but if you can do it in CSS, it's almost always a better way of doing it.

hop · Accepted Answer · 2013-03-13 18:36:37Z

0

Define css classes, and you can easily switch them as needed.

<script>
function myFunction(x)
{
x.style.className="yourcssclass";
}
</script>

answered Mar 13, 2013 at 18:36

hop

2,55811 gold badges40 silver badges56 bronze badges

Comments

Dan Davies Brackett · Accepted Answer · 2013-03-13 18:44:16Z

0

Instead of using JS for this, use the CSS pseudo-class :focus:

input[type="text"]:focus
{
    -webkit-box-shadow:inset 0 0 5px black;
    box-shadow:inset 0 0 5px black;
}

That way, the textbox will get the shadow when the user tabs into it, or clicks it, or whatever - and the styles will properly go away when they leave, and so on.

Remember to use the unprefixed version of the box-shadow style as well.

edited Mar 13, 2013 at 18:44

answered Mar 13, 2013 at 18:37

Dan Davies Brackett

10.1k2 gold badges36 silver badges55 bronze badges

1 Comment

BoltClock Over a year ago

You have :focus confused for :active.

Collectives™ on Stack Overflow

How to change style of an input with javascript?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related