Question

我使用以下代码切换无线电输入：

<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课程将被分配到联系按钮。点击价格按钮后，该课程将被分配到价格按钮。

这很有效。但我想改变活动按钮的颜色 - 现在，两个按钮都是灰色的。但我希望.active按钮为蓝色（主要），non-active按钮为灰色（默认）。

我该怎么做？我只能用CSS吗？

Answer 1

尝试添加此css

.btn-group .btn.active {
    background-color: blue;
}

Answer 2

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

Answer 3

添加此CSS

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

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

现在，默认情况下，这两个按钮都是灰色的。

一旦按钮有.active级，它就会变成蓝色。

Answer 4

这肯定有用：

<!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/

Bootstrap 3 - 如何使用切换更改“.active”按钮的颜色？

4 个答案: