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做?

时间: 原作者:

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>



原作者:
...