Why Does My Form Border Change when Clicked in?

Question

I'm making a form (which has a border and an outline). It looks find when it's not active, but once it is active, it changes.

Not Active: http://gyazo.com/e8a7548efda5ffa161ed241dd1ff2d15

Active: http://gyazo.com/91a8fcabf6ffe1fccb0c5f78085f0353

Anyone know the problem?

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

Try adding outline-offset:0 to your .inputheight style:

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

This is Chrome's default stylesheet coming into play. It will set the the outline-offset to -2px when an input has focus, making your 2px outline hide your border.