1. ホーム
  2. css

[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する

2022-02-10 16:09:52

質問

ウェブページを制作しているのですが、カスタムスタイルの <button> タグを使用します。そこで、CSSで、言いました。 border: none . 今、それはサファリで完全に動作しますが、クロームでは、私がボタンのいずれかをクリックすると、それはその周りに迷惑な青いボーダーを配置します。そこで 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;
}

解決方法は?

これを行うことは 推奨しない を後退させるので アクセシビリティ 詳しくは、こちらをご覧ください。 ポスト .

とはいえ、どうしてもというなら、この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>