Question

我正在为（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>

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

.TestButton:focus {outline:none;}

这个黄色边框消失了。但后来我得到accessibility problem for keyboard users。

Answer 1

Google Chrome的默认样式表应用黄色轮廓来形成具有焦点的元素。

如果您不想要这个黄色轮廓，但仍希望保持键盘用户的可访问性，您可以找到其他方法使该按钮具有焦点。例如，您可以为按钮使用不同的背景颜色：

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

Answer 2

Google Chrome的默认样式表应用黄色轮廓来形成具有焦点的元素。

-webkit-appearance: caret;

点击Chrome中的输入[type =“submit”]时的大纲

2 个答案: