CSS 使用引导程序激活时如何更改按钮颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28712267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the button color when it is active using bootstrap?
提问by Priyank Dey
I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?
我正在使用引导程序 3。我想在单击按钮时更改按钮颜色。我的意思是按钮在被选中时应该是不同的颜色。我怎样才能使用 css 做到这一点？
My codes are :
我的代码是：
<div class="col-sm-12" id="">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
回答by Sachin
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
CSS 有不同的伪选择器，你可以通过它来实现这样的效果。在您的情况下，您可以使用
:active: if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
:active: 如果您只在单击按钮时想要背景颜色并且不想保留。
:focus: 如果你想要背景颜色，直到焦点位于按钮上。
button:active{
background:olive;
}
and
和
button:focus{
background:olive;
}
P.S.: Please don't give the number in Idattribute of html elements.
PS：请不要在Idhtml 元素的属性中给出数字。
回答by Ali Haider
CSS has many pseudo selector like, :active, :hover, :focus, so you can use.
CSS 有很多伪选择器，比如:active、:hover、:focus，所以你可以使用。
Html
html
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css
css
.btn{
background: #ccc;
} .btn:focus{
background: red;
}
回答by Sarower Jahan
HTML--
HTML--
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css--
css--
.active{
background:red;
}
button.btn:active{
background:red;
}
jQuery--
jQuery--
jQuery("#my_styles .btn").click(function(){
jQuery("#my_styles .btn").removeClass('active');
jQuery(this).toggleClass('active');
});
});
view the live demo on jsfiddle
在jsfiddle上查看现场演示
