3

我正在为 (X)HTML 设计一个表单。因为我不喜欢标准样式

<input type = "submit">

我已经使用 CSS 更改了此输入的样式。现在的问题是，当我单击按钮时，元素周围的黄色边框会出现在 Chrome 中，但不会出现在 IE 和 Firefox 中。但是如果我删除 CSS 样式（进入默认行为），Chrome 就没有问题。我不明白为什么我的 CSS 代码会使 Chrome 以这种方式运行。

代码是（它基于从这个站点生成的代码）：

<!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>

从我的网络搜索看来，这个问题与“大纲”属性有关。事实上，如果我添加以下 CSS 代码：

.TestButton:focus {outline:none;}

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

4

2 回答 2

3

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 */;
}
于 2013-11-06T00:24:14.770 回答
1

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

-webkit-appearance: caret;
于 2014-05-28T14:31:57.470 回答