⿏标点击input，显⽰瞬间的边框颜⾊，对之修改与隐藏实例⽰例的是项⽬中的遇到的，要做成的效果是点击该图⽚按钮，达到切换图⽚的效果：
HTML代码如下：
<input class="dBox3Ulimg" type="image" src="img/newselect.png"/>
<input class="dBox3Ulimg" type="image" src="img/yesselect.png" />
JS代码如下：
$(document).ready(function(){
$(".dBox3Ulimg").click(function(){
$(".dBox3Ulimg").toggle();
});
});
点击图⽚按钮的瞬间的样式如下图：
但是在点击的图⽚按钮的瞬间，图⽚出现了带有淡蓝⾊的颜⾊边框，在松开⿏标的瞬间便⼜消失，为了去掉这瞬间的点击颜⾊效果，可以通过focus伪类去实现，具体代码如下：
1、去掉（隐藏）边框的颜⾊
input:focus {
outline:none;
}
再点击图⽚按钮的样式，就不会出现上图中的淡蓝⾊的边框颜⾊了，也能正常切换图⽚。
2、修改边框的颜⾊
input:focus{
健康宝边框颜代表什么意思outline:1px solid red;
}
同理，修改边框的颜⾊为红⾊，便如下图：
以上就是⼩编为⼤家带来的⿏标点击input，显⽰瞬间的边框颜⾊，对之修改与隐藏实例全部内容了，希望⼤家多多⽀持~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论