如何通过单击更改轮廓颜色

Question

我在这里有一个简单的代码，我想在用户点击文本字段时更改轮廓颜色。

<input type="text" id="box1" />
<input type="password" id="box2" />
<input type="email"  id="box3" />

<input type="submit" id="sub" value="submit" />

当用户点击上述任何内容时，我不知道如何更改轮廓颜色。

我的想法是这个jquery代码：

$(document).ready(function(){
$(#box1).click(function(){ 
$(this).css('outline-color','#00BFFF').css('box-shadow',' 0px 9px 0px rgba(0, 161,   214,1)')
});

});

我不确定这是否正确，我想改变轮廓颜色并添加一个盒子阴影，以使它看起来很好看。我一直试图从昨晚开始自己解决这个问题。

Answer 1

请试试这个：

如果您想将阴影颜色放在所有文本框中，请使用类进行演示 http://jsfiddle.net/kEFde/或http://jsfiddle.net/5PhkD/。

您错过了' box

的ID {1}}

休息应符合需要:)

<强>码

 $(document).ready(function () {
  $('#box1').click(function () {
      $(this).css('outline-color', '#00BFFF').css('box-shadow', ' 0px 9px 0px rgba(0, 161,   214,1)')
  });

  });

工作截图：

Answer 2

：focus伪选择器将选择用户输入的任何文本框，它们会在点击时重置。这就是你想要的吗？

http://jsfiddle.net/m8WcN/

.foo:focus{

   outline-color:#00BFFF;
   box-shadow: 0px 9px 0px rgba(0, 161,214,1);

}

Answer 3

我认为你不需要JS这样做，你只想在获得焦点时改变轮廓颜色，只有CSS可以：

#box1{
    outline-color: #00BFFF;  
}
#box1:hover{
    box-shadow: 0px 9px 0px rgba(0, 161,   214,1);
}

可能需要添加一些前缀以实现跨浏览器兼容性