ボタンのブートストラップアクティブクラスをオーバーライドできません。

Question

ブートストラップボタンがあります。私はそれに新しいクラスを追加します。 CSSを変更してください。しかし、ボタンをクリックすると、CSSを変更できません。

.btn-funds { 
 
    border-radius: 20px; 
 
    background-color: #efefef; 
 
    color: #d3b431; 
 
    height: 40px; 
 
    text-align: left; 
 
    padding-top: 7px; 
 
    border: 2px solid #d3b431; 
 
} 
 

 
.btn-funds:active { 
 
    border-radius: 20px; 
 
    background-color: #d3b431; 
 
    color: #efefef; 
 
    height: 40px; 
 
    text-align: left; 
 
    padding-top: 7px; 
 
    border: 2px solid #d3b431; 
 
    box-shadow: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12 col-sm-6 fund-text"> 
 
    <button type="button" class="btn btn-funds">More details</button> 
 
</div>

Answer 1

その青い枠線が境界線が、アウトラインではないので

.btn-funds { 
    outline: 0; 
} 

を試してみてください。それはなぜ変わらないのですか？ 私はこれが助けてくれることを願っています！

Answer 2

あなたが適切にボタン

.btn.btn-funds { 
 
    border-radius: 20px; 
 
    background-color: #efefef; 
 
    color: #d3b431; 
 
    height: 40px; 
 
    text-align: left; 
 
    padding-top: 7px; 
 
    border: 2px solid #d3b431; 
 
    outline: none; 
 
} 
 

 
.btn.btn-funds:active { 
 
    border-radius: 20px; 
 
    background-color: #d3b431; 
 
    color: #efefef; 
 
    height: 40px; 
 
    text-align: left; 
 
    padding-top: 7px; 
 
    border: 2px solid #d3b431; 
 
    box-shadow: none 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12 col-sm-6 fund-text"> 
 
    <button type="button" class="btn btn-funds">More details</button> 
 
</div>