どこか他の場所をクリックしたときにボーダーが消えて、何もフォーカスしないで試してみましたが、クリックしたときに醜いボタンのボーダーを消すにはどうすればいいですか?
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">
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>
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 */
}
それは単に私のために働きます:)
*:focus {
outline: 0 !important;
}
outline
プロパティは必要なものです。次の各プロパティを1回の宣言で設定することの省略形です。
outline-style
outline-width
outline-color
あなたはoutline: none;
を使うことができました。そして、それは受け入れられた答えで提案されます。必要に応じて、より具体的にすることもできます。
button {
outline-style: none;
}
これは私のために働いた
button:focus {
border: none;
outline: none;
}
button:focus{outline:none !important;}
Bootstrapで使用する場合は!important
を追加してください
以下のHTMLを考えます。
<button class="btn-without-border"> Submit </button>
CSSスタイルで次の操作を行います。
.btn-without-border:focus {
border: none;
outline: none;
}
このコードはボタンの境界線を削除し、ボタンがクリックされたときにボタンの境界線のフォーカスを無効にします。
アウトラインを削除することはアクセシビリティの悪夢です。キーボードを使用している人のタブ操作では、自分がどのアイテムを持っているのかわかりません。
ほとんどのボタンをクリックすると、とにかくどこかに移動するので、またはアウトラインを削除してから特定のクラス名に分離するのが一番です。
.no-outline {
outline: none;
}
その後、必要に応じてそのクラスを適用できます。
想像以上に簡単です。ボタンがフォーカスされたら、次のようにoutline
プロパティを適用します。
button:focus {
outline: 0 !important;
}
しかし、私がnone
値を使用するとき、それは私のために働きません。
他の多くの人が言っているように、selector:focus {outline: none;}
はそのボーダーを削除しますしかしボーダーはキーボードユーザーがボタンを見つけることができるようにする重要なアクセシビリティ機能で、はそうするべきではありませんを削除する。
あなたの懸念は審美的なもののように思われるので、あなたはそれがあなたのサイトのスタイリングによりよく合うようにするために、アウトラインの色、スタイル、そして幅を変えることができることを知っているべきです。
selector:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}
速記:
selector:focus {
outline: 1px dashed red;
}