我正在为 (X)HTML 设计一个表单。因为我不喜欢
的标准样式<input type = "submit">
我已经使用 CSS 更改了此输入的样式。现在的问题是，当我点击按钮时，元素周围的黄色边框会出现在 Chrome 中，但不会出现在 IE 和 Firefox 中。但是，如果我删除 CSS 样式(转到默认行为)，Chrome 中就没有问题。我不明白为什么我的 CSS 代码会让 Chrome 以这种方式运行。
代码是(它基于从 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>
从我的网络搜索看来，这个问题似乎与“大纲”属性有关。事实上，如果我添加以下 CSS 代码:
.TestButton:focus {outline:none;}
这个黄色边框消失了。但后来我得到一个 accessibility problem for keyboard users .
最佳答案
Google Chrome 浏览器的默认样式表将黄色轮廓应用于具有焦点的表单元素。
如果您不想要这个黄色轮廓，但仍希望保持键盘用户的可访问性，您可以找到其他方法来使按钮具有焦点可见。例如，您可以为按钮使用不同的背景颜色:
.TestButton:focus {
outline: none;
background-color: /* some darker colour than the original colour */;
}
关于css - 在 Chrome 中单击输入 [type ="submit"] 时的大纲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19801465/