Chromeのcssカスタムスタイルボタンから青い境界線を削除します

853
eshellborn 2013-12-03 13:45.

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;
}

22 answers

1624
Ronen Cypis 2014-02-14 05:15.

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

そうは言っても、あなたが主張するなら、この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>

301
Nathan 2014-08-14 14:00.

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

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

考えられる解決策:フォーカスされたときにボタンを暗くする

以下の例では、Chromeの青い輪郭は最初に使用して削除されました button:focus { outline:0 !important; }

通常表示される基本的なブートストラップボタンは次のとおりです。

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

ここで、ボタンが押されたときのボタン:

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

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

サイトをよりアクセシブルにすることは見過ごされがちですが、Webサイトでより生産的なエクスペリエンスを作成するのに役立ちます。キーボードを使い続けるためにキーボードコマンドを使用してWebサイトをナビゲートする通常のユーザーはたくさんいます。

63
Mike 2016-01-07 04:49.

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

*:focus {outline:none}

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

*:focus {outline:none !important}
51
antonkronaj 2016-06-10 04:50.

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

button:focus {
  outline:none;
  box-shadow: none;
}
46
Scabbia 2014-05-29 06:50.

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

button:focus {outline:0 !important;}

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

32
Aaron Noel De Leon 2018-05-29 07:15.

削除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;
}

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

12
Roo 2015-07-22 20:35.

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

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
8
chuk 2014-11-12 11:45.

これを使用します:

:active {
    outline:none;
}

またはそれが機能しない場合はこれ:

:active {
   outline:none !important;
}

これは私にとってはうまくいきます(少なくともFFとChrome)。:focus状態をターゲットにする代わりに、状態をターゲットにするだけで:active、ユーザーがリンクをクリックしたときにブラウザで見た目に目立たないハイライトが削除されます。ただし、障害を持つユーザーがページをタブまたはシフトタブで移動した場合でも、フォーカス状態は保持されます。両方の当事者が幸せです。:)

7
Behnam Mohammadi 2017-02-26 00:56.

この問題の場合:

これを使って:

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

結果:

7
Forever Nomad 2017-08-25 23:35.

Bootstrapを使用していてこの問題を抱えている人は、:active:focusだけでなく、:activeと:focusも使用するため、次のものが必要になります。

element:active:focus {
    outline: 0;
}

うまくいけば、誰かがそれを理解する時間を節約し、なぜそのような単純なことがうまくいかなかったのか疑問に思って頭を叩きました。

7
chronomer 2019-06-07 21:35.

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

button:focus { outline: none !important; box-shadow: none !important; }
7
ATL_DEV 2019-07-17 08:52.

Bootstrap 4.1および場合によっては他のバージョンを使用している場合、ほとんどのソリューションは機能しません。何度も頭を叩いた後、shadow-noneクラスを適用する必要があることがわかりました

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
4
Rob Myrick 2017-02-10 11:02.

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

button:focus {
    box-shadow:none;
}
3
Santosh Khalse 2016-12-17 00:17.

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

*{
outline: none;
}

または

*{
outline-style: none;
}
3
pavelkarev 2018-06-01 10:56.

すべてのモダンブラウザがサポート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

3
Tobija Fischer 2019-02-13 22:52.

ここでまだ言及されていないアクセシビリティの問題解決する別の方法は、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);
3
apurv thakur 2019-02-19 02:40.

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

.custom-button {
    outline: none
}
2
aaayumi 2017-09-13 21:31.

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

input:focus {outline:0;}
2
Sandeep Sharma 2018-07-10 06:18.

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

2
corsaro 2019-01-31 04:44.

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

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
1
alexrogers 2018-11-11 23:51.

これは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;
}

あなたただ設定することができます:

button:focus {outline:0;}

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

1
Pauloco 2020-06-12 16:52.

さて、これを誰にも見られないというリスクがあっても、2020年の時点でもっと多くのjsソリューションを提供したかった答えはすでにたくさんあるので、たくさんあります:

outline.jsまたはoutliner.jsの両方のライブラリは、ここで私たち全員が抱えている問題を正確に解決します。マウスのアウトラインを削除しますが、キーボードの機能やアクセシビリティは維持します。

したがって、どちらがより重要なスタイルまたはアクセシビリティであるかを決定する代わりに、両方を選択してください!

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language