CODEWITHSUNDEEP
cssgoogle-chrome
Daniel G.
Daniel G.

Reputation: 47

Outline when clicking an input [type="submit"] in Chrome

I'm designing a form for (X)HTML. Since I don't like the standard styling for the

<input type = "submit">

I've changed the style of this input using CSS. The problem now is that when I click on the button, a yellow border around the element will appear in Chrome, but not in IE nor in Firefox. But if I remove the CSS styling (going to default behaviour), there is no problem in Chrome. I don't understand why my CSS code makes Chrome behave in this manner.

The code is (it is based on code generated from this site):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .TestButton{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
            background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
            background-color:#ededed;border-radius:6px; text-indent:0;border:1px solid #dcdcdc; color:#007fd0;font-family:arial;
            font-size:15px; font-weight:normal; font-style:normal;  height:35px;    line-height:35px;   width:135px;text-align:center;
            float:right; margin-right:20px;} 
        .TestButton:hover {
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
            background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); 
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
            background-color:#dfdfdf;}
        .TestButton:active {position:relative;top:1px;}
    </style>
    <title>HTML</title>
</head>

<body>      
    <form action="Action.php" method="post">
        <p><input type="text" name="UserName"></p>
        <p><input class="TestButton" type="submit" value="Test"/></p>
    </form>
</body>

From my web search it seems that this problem is related to the "outline" property. And indeed if I add the following CSS code:

.TestButton:focus {outline:none;}

this yellow border disappears. But then I get an accessibility problem for keyboard users.

Upvotes: 3

Views: 5147

Answers (2)

Hassan
Hassan

Reputation: 11

Google Chrome's default stylesheet applies a yellow outline to form elements which have focus.

-webkit-appearance: caret;

Upvotes: 1

jingtao
jingtao

Reputation: 513

Google Chrome's default stylesheet applies a yellow outline to form elements which have focus.

If you don't want this yellow outline, yet still want to maintain accessibility for keyboard users, you can find other ways to make it visible that the button has focus. For example, you can use a different background colour for the button:

.TestButton:focus {
    outline: none;
    background-color: /* some darker colour than the original colour */;
}

Upvotes: 3

Related Questions