爲什麼點擊時我的表格邊框會發生變化？

Question

我正在製作一個表格（它有一個邊框和一個輪廓）。當它不活動時，它會看起來發現，但一旦活動，它就會改變。

未激活：http://gyazo.com/e8a7548efda5ffa161ed241dd1ff2d15

活動：http://gyazo.com/91a8fcabf6ffe1fccb0c5f78085f0353

任何人都知道這個問題？

HTML：

<form id="search" action="http://www.example.com/search.php" method="get"> 
    <input type="text" size="72" class="inputheight" name="search" /> 
</form> 

CSS：

#search { 
    position:absolute; 
    z-index:5; 
    margin-top:63px; 
    margin-left:208px; 
    } 

.inputheight { 
    height:31px; 
    border:1px solid blue !important; 
    outline:2px solid rgb(149,231,255) !important; 
    } 

Answer 1

嘗試增加outline-offset:0您.inputheight風格：

.inputheight { 
    height:31px; 
    border:1px solid blue !important; 
    outline-offset: 0; 
    outline:2px solid rgb(149,231,255) !important; 
} 

這是Chrome瀏覽器的默認樣式開始發揮作用。當輸入具有焦點時，它將輪廓偏移設置爲-2px，使您的2px輪廓隱藏您的邊框。