web-dev-qa-db-ja.com

入力ボタンから外枠を削除する方法

どこか他の場所をクリックしたときにボーダーが消えて、何もフォーカスしないで試してみましたが、クリックしたときに醜いボタンのボーダーを消すにはどうすればいいですか？

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">
cssbutton
83
Cindy Turlington

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>
131
Ankit Agrawal

ChromeとFFでアウトラインを絞り込む

enter image description hereenter image description here

削除されました：

enter image description here

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

デモ

P：

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

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

*:focus {
    outline: 0 !important;
}
31
X-Coder

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

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

あなたはoutline: none;を使うことができました。そして、それは受け入れられた答えで提案されます。必要に応じて、より具体的にすることもできます。

button {
    outline-style: none;
}
12
henrywright

これは私のために働いた

button:focus {
    border: none;
    outline: none;
}
11
mnis.p
button:focus{outline:none !important;}

Bootstrapで使用する場合は!importantを追加してください

3
user11173874

以下のHTMLを考えます。

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

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

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

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

2
Mwiza

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

ほとんどのボタンをクリックすると、とにかくどこかに移動するので、またはアウトラインを削除してから特定のクラス名に分離するのが一番です。

.no-outline {
  outline: none;
}

その後、必要に応じてそのクラスを適用できます。

2
martinedwards

想像以上に簡単です。ボタンがフォーカスされたら、次のようにoutlineプロパティを適用します。

button:focus {
    outline: 0 !important;
}

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

1
Lighteninger

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

あなたの懸念は審美的なもののように思われるので、あなたはそれがあなたのサイトのスタイリングによりよく合うようにするために、アウトラインの色、スタイル、そして幅を変えることができることを知っているべきです。

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

速記：

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