2015-07-13 95 views
23

我想用下面的代码来设置按钮颜色的样式,颜色一直工作到我点击按钮,按钮显示默认颜色,如何指定按钮的颜色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; 
} 

回答

46

: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类相结合,您可以用更少的代码实现所需的结果,因为您不需要覆盖现有的选择器。

+0

它变为绿色成功颜色,我已经更新了代码的问题BTN-成功,我要创建新按钮从头开始而不是尝试重写成功按钮? – user3312792

+2

我已经更新了我的答案,因为我发现了一个重写选择器。关于从头开始创建一个新按钮,最好是创建一个'btn-custom'类并添加你想要的样式,因为这不需要重写,但仍然可以从标准的'btn' class – Guy

2

只需添加下面的代码在你的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; 
} 
12

您必须使用!important声明做正确地将。

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

'!important'为我做了。出于某种原因,鼠标按下按钮仍然使用默认样式。 – Trev

+1

!重要的是实现目标的最便捷和最快捷的方式,但问题在于,在稍后使您的风格变得更加复杂后,这会很快变得杂乱无章,甚至更加不重要 – Prof83

0

如果你正在从事一个个人项目,而不是一个团队,但值得注意的是,你可以通过应用简单覆盖伪类样式类上的相同样式声明“重要!”:

.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的答案(没有重要样式声明的自定义类)可能会更好。

1

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; 
    } 
    } 
} 
0

默认颜色的按钮,按动画是由于背景图片。使用此每个命名风格(BTN-默认情况下,BTN-成功等):

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