如何用javascript更改输入的样式？

Question

我想要一个

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

属性到文本框，重点关注它。

例如，这里背景颜色正在改变，但我想改为使用box-shadow。

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

和HTML

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

Answer 1

为什么不使用：专注于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;
}

Answer 2

定义css类，您可以根据需要轻松切换它们。

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

Answer 3

使用CSS伪类:focus：

而不是使用JS

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

这样，文本框会在用户选中阴影或点击它或其他任何内容时获得阴影 - 并且样式在离开时会正常消失，依此类推。

请记住使用框架阴影样式的无前缀版本。