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>

私のWeb検索から、この問題は「アウトライン」プロパティに関連しているようです。実際、次の CSS コードを追加すると:

.TestButton:focus {outline:none;}

この黄色い枠が消えます。しかし、キーボード ユーザーのアクセシビリティの問題が発生します。

4

2 に答える 2

3

Google Chrome のデフォルトのスタイルシートは、フォーカスのあるフォーム要素に黄色のアウトラインを適用します。

この黄色のアウトラインは必要ないが、キーボード ユーザーのアクセシビリティを維持したい場合は、ボタンにフォーカスがあることを表示する他の方法を見つけることができます。たとえば、ボタンに別の背景色を使用できます。

.TestButton:focus {
    outline: none;
    background-color: /* some darker colour than the original colour */;
}
于 2013-11-06T00:24:14.770 に答える