css - ng-bootstrap 更改单选按钮的默认颜色
问题描述
我是 ng-bootstrap 的新手。ng-bootsrap 中单选按钮的默认颜色是蓝色。我需要默认颜色为黄色,点击它应该是绿色。
按钮-radio.html
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="1"> Left (pre-checked)
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" value="middle"> Middle
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="false"> Right
</label>
</div>
<hr>
<pre>{{model}}</pre>
按钮-radio.ts
import {Component} from '@angular/core';
@Component({
selector: 'ngbd-buttons-radio',
templateUrl: './buttons-radio.html'
})
export class NgbdButtonsRadio {
model = 1;
}
解决方案
你需要下面的css
.custom-btns .btn-primary:not(:disabled):not(.disabled).active,
.custom-btns .btn-primary:not(:disabled):not(.disabled):active,.custom-btns .show>.btn-primary.dropdown-toggle {
color: #000;
background-color: yellow;
border-color: yellow;
}
.custom-btns .btn-primary {
color: #fff;
background-color: #4CAF50;
border-color: #4CAF50;
}
.custom-btns .btn-primary:hover {
color: #fff;
background-color: #3e9941;
border-color: #3e9941;
}
.custom-btns .btn-primary.focus, .btn-primary:focus {
box-shadow: 0 0 0 0.2rem #FFEB3B;
}
看演示
推荐阅读
- mysql - 三重连接sql
- php - 如何访问应用程序文件夹中的图像
- javascript - 如何获得音频 JS 的位深度/采样率?
- google-chrome - 是否可以创建 chrome 快捷方式以在同一窗口的不同选项卡中打开一组 URL?
- statistics - 如果SPSS中的列,如何从列表中获取具有最大值的列的标签?
- reactjs - 使用重新选择选择器时无法提供/测试传奇
- nativescript - 如何防止系统字体大小更改对 nativescript-angular android 应用程序的影响
- javascript - VueJS 将新对象推送到数组,数据不是响应式的
- r - 使用函数 ClustOfVar::kmeansvar() 将变量分组
- winforms - 从选中的复选框中获取内容