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

どこかをクリックすると、境界線が消え、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">

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

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

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 */
}

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

*:focus {
    outline: 0 !important;
}

これは私のために働いた

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

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

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

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

button {
    outline-style: none;
}

button:focus{outline:none !important;}

ブートストラップ!importantで使用されている場合は追加します

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

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

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

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

button:focus {
    outline: 0 !important;
}

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

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

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

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

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

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

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

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

.no-outline {
  outline: none;
}

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

以下のhtmlを考えると：

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

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

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

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

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

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

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

略記：

selector:focus {
  outline: 1px dashed red;
}