鼠標點擊 input，顯示瞬間的邊框顏色，對之修改與隱藏

示例的是項目中的遇到的，要做成的效果是點擊該圖片按鈕，達到切換圖片的效果：

HTML代碼如下：


<input class="dBox3Ulimg" type="image" src="img/newselect.png"/>
<input class="dBox3Ulimg" type="image" src="img/yesselect.png" style="display: none;"/>

JS代碼如下：


$(document).ready(function(){
    $(".dBox3Ulimg").click(function(){
        $(".dBox3Ulimg").toggle();
    });
});

點擊圖片按鈕的瞬間的樣式如下圖：

 

 

但是在點擊的圖片按鈕的瞬間，圖片出現了帶有淡藍色的顏色邊框，在松開鼠標的瞬間便又消失，為了去掉這瞬間的點擊顏色效果，可以通過focus偽類去實現，具體代碼如下：

1、去掉（隱藏）邊框的顏色

input:focus {
    outline:none;
}

再點擊圖片按鈕的樣式，就不會出現上圖中的淡藍色的邊框顏色了，也能正常切換圖片。

 

2、修改邊框的顏色

input:focus{
outline:1px solid red;
}

同理，修改邊框的顏色為紅色，便如下圖：