Почему меняется моя форма границы при нажатии?

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

Это по умолчанию таблицы стилей Хрома вступления в игру. Он установит смещение контуров до -2px, когда вход будет сфокусирован, что приведет к тому, что контур 2px скроет вашу границу.