我有这个按钮组切换材料2(角度5)
<div class="col-md-4">
<label>Days of Week</label>
<mat-button-toggle-group multiple formControlName="days_service" #group="matButtonToggleGroup" >
<mat-button-toggle [value]="days.value" *ngFor='let days of days_service'>
{{ days.alias }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
这是我的按钮组
但是,我想将其更改为
答案 0 :(得分:4)
我解决了这个问题,覆盖了自定义指令
mat-button-toggle {
border: 1px solid #f28628;
border-radius: 4px;
margin-left: 3px;
margin-right:3px;
width: 30px;
height: 30px;
font-family: 'Nunito Semibold', sans-serif;
font-size: 14px;
font-style: bold;
}
.mat-button-toggle-disabled{
border: 1px solid #c5c0c7;
background-color: #e1dde5;
}
div.center-text{
margin-left: -8px;
margin-top: -3px;
}
答案 1 :(得分:0)
使用下面的CSS
代码:
.mat-button-toggle-checked {
border: 1px solid #c5c0c7;
background-color: #e1dde5;
}