css - 入力ボタンの外枠を消す方法

Question

他の場所をクリックすると境界線が消え、 を使用しようとしまし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">

Answer 1

を使用outline: none;すると、クロムでその境界線を削除できます。

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

Answer 2

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

削除されたボタン フォーカス アウトライン:

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

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

Answer 3

それは私にとって簡単に機能します:)

*:focus {
    outline: 0 !important;
}

Answer 4

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

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

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

button {
    outline-style: none;
}

Answer 5

キーボードを使用するときにアウトラインを復元する別の方法は、 を使用すること:focus-visibleです。ただし、これは IE では機能しません: https://caniuse.com/?search=focus-visible。

Answer 6

Chrome と Mozilla は、ボタンだけでなくリンクされたテキストの周りにもこの行を追加したので、私は自分のサイトでこれを使用します:

a:focus {outline: none;
}

ブラウザ、リンク、ボタンの両方で機能します。

ところで、これはしませんでした (27.4.2021):

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