[英]How to change the outline color with a click
I have a simple code here and I wanted to change the outline color when a user clicks on the text field. 我这里有一个简单的代码,当用户单击文本字段时,我想更改轮廓颜色。
<input type="text" id="box1" />
<input type="password" id="box2" />
<input type="email" id="box3" />
<input type="submit" id="sub" value="submit" />
I am not aware of how to make the outline color change when the user clicks any of the above. 我不知道如何在用户单击以上任何内容时更改轮廓颜色。
my idea is this jquery code: 我的想法是这个jQuery代码:
$(document).ready(function(){
$(#box1).click(function(){
$(this).css('outline-color','#00BFFF').css('box-shadow',' 0px 9px 0px rgba(0, 161, 214,1)')
});
});
am not sure if this is correct, I want to change the outline color and add a boxshadow to it as well to give it a good look. 我不确定这是否正确,我想更改轮廓颜色并向其添加方格阴影以使其外观好看。 I have been trying to figure this out on my own from last night. 从昨天晚上开始,我一直试图自己解决这个问题。
Try this please: 请尝试以下方法:
Working demo http://jsfiddle.net/kEFde/ or http://jsfiddle.net/5PhkD/ this with a class if you want to put that shadow color in all the text box. 如果您想在所有文本框中放入阴影颜色,可以使用带有类的示例工作演示 http://jsfiddle.net/kEFde/或http://jsfiddle.net/5PhkD/ 。
you were missing a '
for the id for box
您缺少box
ID的'
Rest should fit the needs :)
休息应该适合需要:)
code 码
$(document).ready(function () {
$('#box1').click(function () {
$(this).css('outline-color', '#00BFFF').css('box-shadow', ' 0px 9px 0px rgba(0, 161, 214,1)')
});
});
Working screenshot: 工作屏幕截图:
the :focus pseudoselector will select whatever textbox the user is typing in, it will reset when they click out. :focus伪选择器将选择用户键入的任何文本框,单击后将重置。 is this what you want? 这是你想要的吗?
http://jsfiddle.net/m8WcN/ http://jsfiddle.net/m8WcN/
.foo:focus{
outline-color:#00BFFF;
box-shadow: 0px 9px 0px rgba(0, 161,214,1);
}
I think you don't need JS to do that,you justwant to change the outline color when gets focus, Only CSS is ok: 我认为您不需要JS来做到这一点,您只是想在获得焦点时更改轮廓颜色,只有CSS可以:
#box1{
outline-color: #00BFFF;
}
#box1:hover{
box-shadow: 0px 9px 0px rgba(0, 161, 214,1);
}
perhaps some prefix should be added for cross browser cmpatibility 也许应该为跨浏览器的兼容性添加一些前缀
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.