7

次のことを行う慣行に関しては、いくつかの論争がありました。

a, input, textarea, button {
    outline: none;
}

アクセシビリティの問題は一般的な懸念事項です。

(上記のコードのように) この機能を完全に削除するつもりはありません。ただし、この機能は、望ましくない領域に意図しない境界線 (ええと、アウトライン?) を追加することで、元のデザインを大幅に台無しにします。

主な問題は、これらのアウトラインが実際には要素の輪郭ではなく、要素の周囲の長方形の領域に従っていることです (つまり、境界線の半径などは無視されます)。

例：

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}
<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

私が知っている唯一の解決策は、上記のコードを実行し、独自のシステムを採用することです。

このアプローチを取るときのベストプラクティスは何ですか?

4

2 に答える 2

9

それはそう。輪郭は、境界線の外側の長方形の領域の周りにあります。角の丸みは考慮されていません。

アウトラインを無効にしても問題はありません。たとえば、キーボードを使用しているユーザー向けに他のユーザー補助機能を追加してください。たとえば、フォーカスのある背景の色を変更してください。

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
    outline: 0;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}
input:focus {
    border-color: #999;
}
<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

于 2012-02-14T10:04:57.777 に答える
0

フォーム要素の数と同じくらい、ボタン要素はブラウザーでのレンダリングが異なり、多くの修正が必要です...

F. Verschelde のhttp://fvsch.com/code/button-css/では、コンテンツの周りではなく、要素全体の周りにボタンのアウトラインを作成できるようにする必要があります。

于 2012-02-16T19:10:15.967 に答える