有没有一种方法可以隐藏Angular中的mat-单选按钮，而使其内部的图像可点击？
有没有一种方法可以隐藏Angular中的mat-单选按钮，而使其内部的图像可点击？
提问于 2020-05-10 04:33:28
This is how it looks till now我正在尝试隐藏单选按钮，而使用男性和女性的图像。这是mat-radio-group的html代码：
<mat-radio-group formControlName="gender">
<mat-label>
<mat-radio-button class="female-radio" value="M"></mat-radio-button>
<img width="100" src={{imageTwo}}>
</mat-label>
<mat-label>
<mat-radio-button class="female-radio" value="F"></mat-radio-button>
<img width="100" src={{imageOne}}>
</mat-label>
</mat-radio-group>在我的scss组件中，我做到了：
.female-radio + img {
cursor: pointer;
}
.mat-radio-checked + img {
outline: 2px solid #f00;
}为了选择性别，我应该如何只显示图像？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-10 05:26:34
请在您的组件html中进行以下更改
<mat-radio-group formControlName="gender">
<mat-label>
<mat-radio-button class="female-radio" value="M">
<img width="100" src={{imageTwo}}>
</mat-radio-button>
</mat-label>
<mat-label>
<mat-radio-button class="female-radio" value="F">
<img width="100" src={{imageOne}}>
</mat-radio-button>
</mat-label>
</mat-radio-group>并将以下css添加到css/scss文件中
:host ::ng-deep .mat-radio-container {
display: none;
}这将只显示图像，功能将保持不变。仍然可以在formControlName gender中访问选定项的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61703350
复制相关文章
相似问题
腾讯云开发者
