點擊顯示默認顏色時的引導按鈕

我想用下面的代碼來設置按鈕顏色的樣式，顏色一直工作到我點擊按鈕，按鈕顯示默認顏色，如何指定按鈕的顏色onclick？點擊顯示默認顏色時的引導按鈕

.btn-success { 
color: #ffffff; 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success:hover, 
.btn-success:focus, 
.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
color: #ffffff; 
background-color: #1F2838; 
border-color: #494F57; 
} 

.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
background-image: none; 
} 

.btn-success.disabled, 
.btn-success[disabled], 
fieldset[disabled] .btn-success, 
.btn-success.disabled:hover, 
.btn-success[disabled]:hover, 
fieldset[disabled] .btn-success:hover, 
.btn-success.disabled:focus, 
.btn-success[disabled]:focus, 
fieldset[disabled] .btn-success:focus, 
.btn-success.disabled:active, 
.btn-success[disabled]:active, 
fieldset[disabled] .btn-success:active, 
.btn-success.disabled.active, 
.btn-success[disabled].active, 
fieldset[disabled] .btn-success.active { 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success .badge { 
    color: #161617; 
background-color: #ffffff; 
}

來源

2015-07-13 user3312792

:active選擇器是您所需要的點擊。

.btn-sample:active { 
    // click styles here 
}

看起來你有一個以上的，所以如果你仍然看到一個稍微不同的顏色則是因爲box-shadow，還被應用於對active按鈕狀態的最有可能的。禁用像這樣：

.btn-sample:active { 
    box-shadow: none; 
}

編輯：是覆蓋你的CSS選擇器實際上是btn-success:active:focus。所以，你需要將以下內容添加到你的CSS：

.btn-success:active:focus { 
    color: #ffffff; 
    background-color: #161617; 
    border-color: #494F57; 
}

而且低於我的意見，你會過得更好創建自己的類如btn-custom到可以應用所需的樣式。將此與現有的btn類相結合，您可以用更少的代碼實現所需的結果，因爲您不需要覆蓋現有的選擇器。

來源

2015-07-13 09:06:17 Guy

它變爲綠色成功顏色，我已經更新了代碼的問題BTN-成功，我要創建新按鈕從頭開始而不是嘗試重寫成功按鈕？ – user3312792

我已經更新了我的答案，因爲我發現了一個重寫選擇器。關於從頭開始創建一個新按鈕，最好是創建一個'btn-custom'類並添加你想要的樣式，因爲這不需要重寫，但仍然可以從標準的'btn' class – Guy

只需添加下面的代碼在你的CSS

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover 
{ 
color: #fff; 
background-color: #161617; 
border-color: #494F57; 
}

來源

2015-07-13 09:46:14

您必須使用!important聲明做正確地將。

.btn-success:hover, .btn-success:active, .btn-success:focus { 
    color: #ffffff !important; 
    background-color: #1F2838 !important; 
    border-color: #494F57 !important; 
}

來源

2016-03-01 20:39:11 xxxbence

'！important'爲我做了。出於某種原因，鼠標按下按鈕仍然使用默認樣式。 – Trev

！重要的是實現目標的最便捷和最快捷的方式，但問題在於，在稍後使您的風格變得更加複雜後，這會很快變得雜亂無章，甚至更加不重要 – Prof83

如果你正在從事一個個人項目，而不是一個團隊，但值得注意的是，你可以通過應用簡單覆蓋僞類樣式類上的相同樣式聲明「重要！」：

.btn-success { color: #ffffff !important; background-color: #161617 !important; border-color: #494F57 !important; }

一般來說，它是從遠離一個好主意！重要，因爲這將覆蓋在BTN-成功類中的任何和所有的顏色，背景顏色和邊框顏色樣式聲明（除非你覆蓋的風格再次聲明！在你的樣式表中很重要，儘管這很荒謬）。

如果目標是儘可能小的文件大小，並且您以相同的方式在任何地方使用此類 - 意味着沒有內聯樣式 - 那麼這可能是您的最佳選擇。

另外，但使用相同的想法，您可以嘗試命名一個新的自定義類，如.btn-success-important，並且僅在需要使用覆蓋的btn-success之後應用它。

雖然有一個問題：如果您將.btn-success或您的.btn-success-important與任何其他Bootstrap .btn-group合併，那麼重要的是將重寫在其中聲明的任何僞類樣式。在這種情況下，用Guy的答案（沒有重要樣式聲明的自定義類）可能會更好。

來源

2016-06-07 19:11:52 bagofcole

從bootstrap source一些啓示覆蓋其中$灰白色和$品牌的黑色被我們定義這些不同的按鈕狀態：

.btn-success { 
    &:hover, 
    &:focus, 
    &.focus { 
    color: $off-white; 
    background-color: $brand-black; 
    } 

    &:active, 
    &.active, 
    &.disabled, 
    &:disabled { 
    color: $off-white; 
    background-color: $brand-black; 

    &:focus, 
    &.focus { 
     color: $off-white; 
     background-color: $brand-black; 
    } 
    } 
}

來源

2016-09-21 14:45:25

默認顏色的按鈕，按動畫是由於背景圖片。使用此每個命名風格（BTN-默認情況下，BTN-成功等）：

.btn-primary:active, 
.btn-primary.active, 
.open > .dropdown-toggle.btn-primary { 
    background-image: none; 
}

來源

2017-05-22 20:14:47

點擊顯示默認顏色時的引導按鈕

回答

相關問題