私は Web ページで作業しており、カスタム スタイルの<button>タグが必要です。そこで、CSS で次のようにしましたborder: none。 Safari では問題なく動作しますが、Chrome では、ボタンの 1 つをクリックすると、その周囲に煩わしい青い枠が表示されます。 または が動作すると思っていましたbutton:active { outline: none }がbutton:focus { outline:none }、どちらも動作しません。何かアイデアはありますか?
クリックする前の外観は次のとおりです (クリックした後もこの外観を維持したい):
私が話している境界線とはこれです:
これが私の CSS です:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
ベストアンサー1
これを実行すると、アクセシビリティサイトの詳細はこちら役職。
そうは言っても、どうしてもという場合は、この CSS が機能するはずです。
button:focus {outline:0;}
ぜひチェックしてください、または JSFiddle:http://jsfiddle.net/u4pXu/
または、次のスニペットで:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
button:focus {outline:0;}<button class="launch">Launch with these ads</button>
<button class="change">Change</button>