入力ボタンからアウトライン枠を削除する方法


137

どこかをクリックすると、境界線が消え、onfocus noneを試しましたが、助けにはなりませんでした。クリックしたときに醜いボタンの境界線を消すにはどうすればよいですか。

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}
<input type="button" value="Example Button">


私のmozillaブラウザで問題なく見える
DrixsonOseña'10 / 11/13

1
フォーカス四角形は、クリックが効果的であったことをユーザーが確認できるようにして、誤って2回クリックするのを防ぎます。それで、問題を解決しているのではなく、問題を作成しているのですか?
Jukka K.Korpela、2013年

回答:


192

アウトラインの使用:なし; クロムでそのボーダーを削除できます

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

19
Chromeでは、ではなくにoutline: none;ルールを追加する必要input[type="button"]:focusがありましたinput[type="button"]
Sung Cho

@SungCho:ありがとう。あなたの方法は私を助けました。
priyamtheone

75

ChromeとFFでアウトラインをフォーカス

ここに画像の説明を入力してください ここに画像の説明を入力してください

削除されました:

ここに画像の説明を入力してください

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

デモ

アクセシビリティ(A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

54

それは単純に私のために働きます:)

*:focus {
    outline: 0 !important;
}

1
これが私にとってうまくいった唯一の答えですが、重要ではないのにそれをどのように実行しますか?どうしても必要な場合にのみ使用すべきだと多くの情報源から聞いたことがあります。
ジェイ

外部CSSでアプリケーション全体に対してこのボタンのスタイルを設定しました。無視したい場合は、CSSの#idを使用して、各ボタンでそれを使用できます。#button-tyle {outline:0; または、各ボタンに#idがないすべてのボタンに同じスタイルを使用します。ここにデモリンクがあります。input [type = "button"] {width:70px; 高さ:30px; margin-left:72px; margin-top:15px; 表示ブロック; 背景色:灰色; 色:白; ボーダー:なし。アウトライン:0; }
X-Coder 2015

19

これは私のために働いた

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

14

outlineプロパティには何が必要です。これは、次の各プロパティを1つの宣言で設定するための省略形です。

  • outline-style
  • outline-width
  • outline-color

outline: none;受け入れられた回答で提案されているを使用できます。必要に応じて、より具体的にすることもできます。

button {
    outline-style: none;
}


4

フォーカスのアウトラインプロパティを変更したときに発生する問題を回避するには、ユーザーが入力ボタンをTabキーでクリックするか、クリックすると視覚効果を与えます。

この場合は送信タイプですが、type = "button"にも適用できます。

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}


3

それはあなたが考えるよりも非常に簡単です。ボタンがフォーカスされたらoutline、次のようにプロパティを適用します。

button:focus {
    outline: 0 !important;
}

しかし、私がnone値を使用するとき、それは私のために機能しません。


3

標準のウェブ開発までは、必要なアクセス可能なイベントを削除することは良い考えではありません。どちらの方法でも、アウトラインのみを削除するソリューションを探しても問題は解決しません。また、青色の影を削除する必要があります。特定のシナリオでは、別のクラス名を使用して、この特別なスタイルをボタンに分離します。

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

これを行う方が良い

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

3

outlinebox-shadowボタンのプロパティの両方をに設定し、noneそれらを重要にします。

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 


値を重要に設定する理由は、Bootstrapなどの他のCSSライブラリまたはフレームワークを使用している場合、上書きされる可能性があるためです。


2

アウトラインを削除することは、アクセシビリティの悪夢です。キーボードを使用してタブで移動する人は、自分がどのアイテムを使用しているのか決してわかりません。

ほとんどのクリックされたボタンはどこかに移動するので、そのままにしておくか、アウトラインを削除する必要がある場合は、特定のクラス名を分離することをお勧めします。

.no-outline {
  outline: none;
}

その後、必要なときにいつでもそのクラスを適用できます。


2

以下のhtmlを考えると:

<button class="btn-without-border"> Submit </button>

CSSスタイルで、次の操作を行います。

.btn-without-border:focus {
    border: none;
    outline: none;
}

このコードはボタンの境界線を削除し、ボタンがクリックされたときにボタンの境界線フォーカスを無効にします。


2

他の多くの人が述べたように、selector:focus {outline: none;}はその境界線を削除しますが、その境界線はキーボードユーザーがボタンを見つけることができる主要なアクセシビリティ機能であり、削除してはいけません。

あなたの懸念は審美的なものであるように思われるため、アウトラインの色、スタイル、および幅を変更して、サイトのスタイルにうまく合わせることができることを知っておく必要があります。

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

略記:

selector:focus {
  outline: 1px dashed red;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.