web-dev-qa-db-ja.com

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

私はWebページに取り組んでいます、そして私はカスタムスタイルの<button>タグが欲しいです。 CSSを使って、border: noneと言いました。現在はサファリでは完璧に機能しますが、クロムでは、ボタンの1つをクリックすると、迷惑な青い枠が周囲に表示されます。 button:active { outline: none }またはbutton:focus { outline:none }はうまくいくと思いましたが、どちらもうまくいきませんでした。何か案は？ 

これはクリックされる前の様子です（そしてクリックされた後でも見た目にしたいのですが）。

これが私が話している国境です。

enter image description here

これが私の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;
}
cssgoogle-chrome
604
eshellborn

これをあなたの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>

1229
Ronen Cypis

待ってください！そのlyいアウトラインには理由があります！

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

考えられる解決策：フォーカスがあるときにボタンを暗くする

以下の例では、button:focus { outline:0 !important; }を使用してChromeの青いアウトラインが最初に削除されました

基本的なBootstrapボタンは通常表示されるとおりです。 Bootstrap Buttons in Normal State

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

ここでボタンが押されたとき： enter image description here

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

無効なユーザーだけのものではありません

サイトをよりアクセスしやすくすることは見過ごされがちですが、ウェブサイトの生産性を高めるのに役立ちます。キーボードを使用するために、キーボードコマンドを使用してWebサイト内を移動する多くの一般ユーザーがいます。

270
Nathan

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

*:focus {outline:none}

Bagofcoleが述べたように、あなたも！importantを追加する必要があるかもしれないので、スタイルはこのようになるでしょう：

*:focus {outline:none !important}
51
Mike

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

button:focus {outline:0 !important;}

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

46
Scabbia

この問題の私の例では、私はbox-shadow: noneを指定しなければなりませんでした

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

CSSファイルにこれを追加してください。

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

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

：focus-visible を使用してください。これは現在、CSSを使用してキーボードのみのフォーカスをスタイリングするためのW3Cの提案です。主要なブラウザがそれをサポートするまでは、この堅牢な polyfill を使うことができます。

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

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

私はまたあなたがより多くの情報を必要とする場合のためにもっと詳細な ポスト を書きました。 

9
Aaron Noel De Leon

どちらかを使ってください。

:active {
    outline:none;
}

それでもうまくいかない場合はこちら 

:active {
   outline:none !important;
}

これは私にとってはうまくいきます（少なくともFFとChrome）。 :focus状態をターゲットにするのではなく、:active状態をターゲットにするだけで、ユーザーがリンクをクリックしたときにブラウザの美的で目障りな強調表示が解除されます。しかし、障害のあるユーザーがタブを移動したり、タブを移動したりしても、フォーカス状態は維持されます。両当事者は幸せです。 :)

8
chuk

Bootstrapを使っていてこの問題を抱えている人のために、彼らは：active：focusだけでなく：activeや：focusも使っています。

element:active:focus {
    outline: 0;
}

うまくいけば、そのような単純なことがうまくいかなかったのか疑問に思って、誰かに時間を節約してもらった。

7
Forever Nomad

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

button:focus {
    box-shadow:none;
}
4
Rob Myrick

この問題のために：

enter image description here

これを使って：

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

結果：

enter image description here

3
Behnam Mohammadi

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

*{
outline: none;
}

または

*{
outline-style: none;
}
3
Santosh Khalse

単にoutline:none;と書いてください。擬似要素focusを使う必要はありません

2
Sandeep Sharma

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

input:focus {outline:0;}
2
aaayumi

最新のすべてのブラウザーがcss-selector：focus-visibleのサポートを開始するまで、
アクセシビリティを保存するための最も簡単でおそらく最良の方法は、このトリッキーなフォーカスを削除することですマウスのみusersおよびそれを保存するにはキーボードユーザー：

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

2
pavelkarev

これはChromeファミリの問題であり、ずっと続いています。 

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

ここに表示することができます： https://codepen.io/anon/pen/Jedvwj ボタンのようなものに境界線を追加するとすぐに（たとえばrole = "button"がタグに追加されたとします） ）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;
}

can を設定するだけです：

button:focus {outline:0;}

しかし、もしあなたが多数のユーザーを抱えているのであれば、マウスを使うことができない人やキーボードをスピードのために使いたいだけの人には不利です。

1
alexrogins

Bootstrap 4.1およびその他のバージョンを使用している場合、ほとんどのソリューションは機能しません。多くのヘッドバンギングの後、shadow-noneクラスを適用する必要があることがわかりました。

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

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

.custom-button {
    outline: none
}
1
apurv thakur

アクセシビリティの問題を解決するもう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);
0
Tobija Fischer

私はブートストラップと同じ問題を抱えていた、私はアウトラインとボックスシャドウの両方で解決した

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

}

0
corsaro

Chromeと他のブラウザの修正

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