ChromeのCSSカスタムスタイルボタンから青い枠を削除

Webページで作業していて、カスタムスタイルの<button>タグが必要です。CSSで、私は言った：border: none。これでサファリでは完全に機能しますが、クロムでは、ボタンの1つをクリックすると、その周りに迷惑な青い境界線が表示されます。私は思っbutton:active { outline: none }たりbutton:focus { outline:none }動作しますが、どちらも行いません。何か案は？

これは、クリックされる前の状態（およびクリックされた後も表示されるようにする方法）です。

そして、これは私が話している国境です：

ここに私のCSSがあります：

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

これは、サイトのアクセシビリティを低下させるため、お勧めできません。詳細については、この投稿を参照してください。

そうは言っても、主張すれば、このCSSは機能するはずです。

button:focus {outline:0;}

それをチェックするか、JSFiddle：http ://jsfiddle.net/u4pXu/

またはこのスニペットでは：

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

待つ！その醜いアウトラインには理由があります！

醜い青い輪郭を削除する前に、アクセシビリティを考慮に入れることをお勧めします。デフォルトでは、その青いアウトラインはフォーカス可能な要素に配置されます。これは、アクセシビリティの問題のあるユーザーが、タブでそのボタンにフォーカスできるようにするためです。一部のユーザーは、マウスを使用するための運動能力がなく、キーボード（または他の入力デバイス）のみを使用してコンピューターと対話する必要があります。青いアウトラインを削除すると、フォーカスされている要素に関する視覚的なインジケーターがなくなります。青い輪郭を削除する場合は、ボタンがフォーカスされていることを示す別の種類の視覚的表示に置き換える必要があります。

可能な解決策：フォーカスされたときにボタンを暗くする

以下の例では、Chromeの青い輪郭は、 button:focus { outline:0 !important; }

以下は、通常表示される基本的なブートストラップボタンです。

フォーカスを受け取ったときのボタンは次のとおりです。

ボタンが押されたときのボタン：

ご覧のとおり、ボタンがフォーカスされているときは、ボタンが少し暗くなっています。個人的には、ボタンのフォーカス状態と通常の状態の間に非常に顕著な違いがあるように、フォーカスボタンをさらに暗くすることをお勧めします。

障害のあるユーザーのためだけではありません

あなたのサイトをよりアクセシブルにすることは、しばしば見落とされがちですが、あなたのウェブサイトでより生産的な体験を生み出すのに役立ちます。キーボードを使用するためにキーボードコマンドを使用してWebサイトをナビゲートする多くの一般ユーザーがいます。

すべてを選択し、outline：noneをすべてに適用することで、ページ内のすべてのタグからアウトラインを削除します:)

*:focus {outline:none}

bagofcoleが述べたように、！importantも追加する必要がある場合があるため、スタイルは次のようになります。

*:focus {outline:none !important}

この問題の私のインスタンスでは、指定する必要がありました box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

!importantより良い結果を得るために、宣言を忘れないでください

button:focus {outline:0 !important;}

！importantプロパティを持つルールは、そのルールがCSSドキュメントのどこに出現しても、常に適用されます。

削除するoutlineとアクセシビリティにひどい！理想的には、フォーカスリングは、ユーザーがキーボードを使用する場合にのみ表示されます。。

：focus-visibleを使用します。これは現在、CSSを使用してキーボードのみのフォーカスをスタイリングするW3Cの提案であり、Firefox（caniuse）でサポートされています。他の主要なブラウザでサポートされるまでは、この堅牢なポリフィルを使用できます。

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

さらに情報が必要な場合に備えて、詳細な投稿も作成しました。

これをCSSファイルに追加します。

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

次のいずれかを使用します。

:active {
    outline:none;
}

または、これが機能しない場合：

:active {
   outline:none !important;
}

これは私には有効です（少なくともFFとChrome）。:focus状態をターゲットにするのではなく、単に:active状態をターゲットにします。これにより、ユーザーがリンクをクリックしたときに、ブラウザーの美的に目立たない強調表示が削除されます。しかし、障害を持つユーザーがページを移動したりタブをシフトしたりしても、フォーカス状態は保持されます。両方のパーティーは幸せです。:)

この問題の場合：

これを使って：

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

結果：

Bootstrapを使用していてこの問題が発生している人は、：active：focusと：activeと：focusを使用しているため、次のものが必要です。

element:active:focus {
    outline: 0;
}

うまくいけば、誰かがそれを考え出すのを少しでも助けて、なぜそんな単純なことがうまくいかないのかと少し頭を悩ませました。

Bootstrap 4.1およびその他のバージョンを使用している場合、ほとんどのソリューションは機能しません。多くの頭を叩いた後、私はあなたがシャドウなしクラスを適用する必要があることを発見しました：

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

これは私のために働いたものです：

button:focus {
    box-shadow:none;
}

Chromeおよびその他のブラウザーの修正

button:focus { outline: none !important; box-shadow: none !important; }

青い枠の問題があるすべての要素に対してこのコードを試してください

*{
outline: none;
}

または

*{
outline-style: none;
}

ここではまだ触れられていないアクセシビリティの問題を解決するもう1つの方法は、Javascriptを少し使用することです。クレジットはhackernoonからのこの洞察に満ちたブログ投稿に行きます：https ://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

ここでのアプローチは非常に単純ですが効果的です。人々がタブキーを使用してページをナビゲートし始めたときにクラスを追加します（必要に応じて、もう一度マウスに切り替えたときにクラスを削除します）。このクラスを使用して、フォーカスのアウトラインを表示するかどうかを指定できます。 。

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

私は同じ問題に直面したので、単純なCSSを使用しました

.custom-button {
    outline: none
}

入力で同じ効果を削除したい場合は、次のコードとボタンを追加できます。

input:focus {outline:0;}

すべてのモダンブラウザがサポートCSSセレクタを開始するまでの：フォーカス可視、
する最も簡単な、おそらく最良の方法は、アクセシビリティを保存するには、このトリッキーなフォーカスを削除することですマウスだけのユーザーのために、それを保存するために、キーボードのユーザーのために：

1.この小さなポリフィル（約10kb）を使用：https : //github.com/WICG/focus-visible
2.次のコードをcssのどこかに追加します。

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

css4-selector：focus-visibleのブラウザーサポートは現在非常に弱い：https ://caniuse.com/#search=focus-visible

単に書いてくださいoutline:none;。疑似要素を使用する必要はありませんfocus

これはChromeファミリーの問題であり、永遠に存在しています。

バグが発生しましたhttps://bugs.chromium.org/p/chromium/issues/detail?id=904208

ここに表示できます：ボタンのようなものにボーダーを追加するとすぐにhttps://codepen.io/anon/pen/Jedvwj（たとえば、ロール= "ボタン"がタグに追加されたとすると）Chromeが台無しにマウスでクリックしたときにフォーカス状態を設定します。

この修正を使用することを強くお勧めします：https : //github.com/wicg/focus-visible。

次のようにしてください

npm install --save focus-visible

スクリプトをHTMLに追加します。

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

または、webpackなどを使用している場合は、メインエントリファイルにインポートします。

import 'focus-visible/dist/focus-visible.min';

次に、これをCSSファイルに入れます：

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

次のように設定できます。

button:focus {outline:0;}

しかし、多数のユーザーがいる場合、マウスを使用できないユーザーや、速度を上げるためにキーボードだけを使用したいユーザーには不利です。

ブートストラップでも同じ問題がありました。アウトラインとボックスシャドウの両方で解決しました

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}