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

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;}

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

以上就是小編為大家帶來的鼠標點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例全部內容了，希望大家多多支持武林網~