twitter-bootstrap - css Bootstrap 3如何更改"活动"按钮的颜色?

  显示原文与译文双语对照的内容
94 1

我正在使用以下代码切换无线电输入:

<div class="btn-group">
 <a href="#price" class="btn btn-primary btn-xs active" data-toggle="tab">
 <input type="radio" name="price" id="price" value="1"> Price
 </a>
 <a href="#contact" class="btn btn-primary btn-xs active" data-toggle="tab">
 <input type="radio" name="contact" id="contact" value="0"> Contact
 </a>
</div>

点击联系人按钮时,.active 类将被分配给Contact的联系人按钮。点击 button按钮时,课程将被分配到。

这个效果很好。但是我想改变激活按钮的颜色- 现在,两个按钮都是灰色的。但我想让 .active 按钮蓝色( 主) 和 non-active 按钮灰色( 默认值) 。

我该怎么做?我只能用CSS做?

时间:原作者:0个回答

90 0

尝试添加这里 css

.btn-group. btn.active {
 background-color: blue;
}
原作者:
82 0

这一定会工作:

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/* Hide the browser's default radio button */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
 border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~. checkmark {
 background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~. checkmark {
 background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
 content:"";
 position: absolute;
 display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~. checkmark:after {
 display: block;
}
/* Style the indicator (dot/circle) */
.container. checkmark:after {
 top: 9px;
 left: 9px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container">One
 <input type="radio" checked="checked" name="radio">
 <span class="checkmark"></span>
</label>
<label class="container">Two
 <input type="radio" name="radio">
 <span class="checkmark"></span>
</label>
<label class="container">Three
 <input type="radio" name="radio">
 <span class="checkmark"></span>
</label>
<label class="container">Four
 <input type="radio" name="radio">
 <span class="checkmark"></span>
</label>
</body>
</html>

查看:https://jsfiddle.net/7yy68ec3/

原作者:
92 3

添加这个 CSS,

.btn-group. btn.btn-primary.active {
 background: blue;
}
.btn-group. btn.btn-primary {
 background: grey;
}

现在,两个按钮默认都是灰色的。

一旦按钮有 .active 类,它就会变成蓝色。

原作者:
121 0
<div class="btn-group">
 <a href="#price" class="btn btn-primary btn-xs active" role="button" data-toggle="tab">
 <input type="radio" name="price" id="price" value="1"> Price
 </a>
 <a href="#contact" class="btn btn-default btn-xs disabled" role="button" data-toggle="tab">
 <input type="radio" name="contact" id="contact" value="0"> Contact
 </a>
</div>
原作者:
...