Search code examples
htmlcssformsborderoutline

Why Does My Form Border Change when Clicked in?

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

  • 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.