デフォルトのボタンはクリック時にアウトラインスタイルを表示しません

Question

デフォルトのボタンはクリック時にアウトラインスタイルを表示しませんが、カスタムボタンはクリック時にアウトラインスタイルを表示するのはなぜですか？

クリック時にカスタムボタンからアウトラインスタイルを削除するにはどうすればよいですか？ユーザーがキーボードを使用して移動するときにアウトラインスタイルを維持します（デフォルトボタンと同じ動作）。

.btn { 
 
    display: inline-block; 
 
    padding: 12px; 
 
    background: cyan; 
 
    border: none; 
 
}

<div> 
 
    <button type="button">Why no outline styles on click?</button> 
 
</div> 
 
<div style="margin-top: 24px"> 
 
    <button class="btn">Why outline styles on click?</button> 
 
</div>

UPDATE：アクセシビリティの理由でなし：私はアウトラインを使用することはできません。参照してください：http://www.outlinenone.com/

Answer 1

アクセシビリティが懸念される場合は、なぜアウトラインを削除したいのですか？アウトラインを削除するには、アクセシビリティのためには完全にOKですが、別のスタイルを追加してください：background-color、colorまたはborderなどです。

Answer 2

あなたはしばらくは、一部のブラウザには、次のデフォルトを設定

:focus { 
    outline: -webkit-focus-ring-color auto 5px; 
} 

とする必要:focus {outline: none;}

.btn { 
 
    display: inline-block; 
 
    padding: 12px; 
 
    background: cyan; 
 
    border: none; 
 
} 
 
.btn:focus { 
 
    outline: none; 
 
}

<div> 
 
    <button type="button">Why no outline styles on click?</button> 
 
</div> 
 
<div style="margin-top: 24px"> 
 
    <button class="btn">Why outline styles on click?</button> 
 
</div>

Answer 3

を使用して焦点を当て、ボタンのoutline属性を設定することができます乗り越える：

.btn:focus { 
    outline: none; 
} 

Answer 4

あなたは含めることにより、アウトラインを削除することができます。

.btn{ 
    outline: none; 
} 

あなたが知っている必要がありますもう一つは、次のとおりです。 あなたがEXを使用した場合。 .btn:activeアクティブは、ボタンをクリックするような行動を意味します。

あなたがしなければならないことは、デフォルトでアウトラインを含めて、それをアクションやフォーカスで削除するだけです。

Answer 5

私はあなたが接近によって何を意味するのかわかりませんが、あなたは、あなたが

button:focus {outline:0;} 

fiddle here

を使用する必要がアウトラインを削除するワン場合、私は差別化する方法があるとは思いません、focusボタンをキーボード入力またはマウスクリックすると、いずれもボタンのfocusイベントが発生します。

Answer 6

クリックしたときに表示されるfocusと、キーを押すときに表示されるfocusを区別するには、javascriptを使用する必要があります。

• Determine what triggered focus event?
• Differentiate between focus event triggered by keyboard/mouse
• Detect focus initiated by tab key?

への回答にそこに良いオプションの束をチェックアウト - あなたは、あなたがこのページにJSを追加することができるしていると仮定するとあなたのために働くものを見つけるでしょう。

Answer 7

Taken and edここでは、前の質問からited：

Why pseudo element :focus on button when using TAB but not click?

あなたはこれがクリックされていない、ユーザーはタブ付きました輪郭のみが表示されますJS

var submit = document.getElementById("submit"); 
 

 
var tabbing = false; 
 

 
window.onkeyup = function (e) { 
 
    if (e.keyCode == 9) { 
 
     tabbing = true; 
 
    } 
 
} 
 

 
submit.onfocus = function (e) { 
 
    if (tabbing) { 
 
     this.classList.add("tabbed"); 
 
    } 
 
}; 
 

 
submit.onblur = function() { 
 
    this.classList.remove("tabbed"); 
 
    tabbing = false; 
 
};

#submit.tabbed:focus { 
 
    outline: 2px solid green; 
 
} 
 

 
#submit{ 
 
    display: inline-block; 
 
    padding: 12px; 
 
    background: cyan; 
 
    border: none; 
 
    } 
 

 
#submit:focus{ 
 
    outline: none; 
 
    }

<label>Name:</label> 
 
<input type="text" /> 
 
<br> 
 
<label>Pass:</label> 
 
<input type="password" /> 
 
<br> 
 
<label>Save Password:</label> 
 
<input type="checkbox" /> 
 
<br> 
 
<br> 
 
<button id="submit">Submit</button>

経由でこれを行うことができますボタン。