如何增加 AngularJS Material 中单选按钮选择的大小？答案

【问题标题】：How do I increase the size of a radio button selection in AngularJS Material?如何增加 AngularJS Material 中单选按钮选择的大小？
【发布时间】：2020-06-27 20:15:57
【问题描述】：

我想让检测到点击的区域更大，如图所示 this image.

我想让它无论您在红色区域内单击的哪个位置都会选择单选按钮。

我已经设法使用 CSS 样式填充使该区域可选择：

$scope.myObj = {
  "padding": "20px",
}

HTML 如下所示：

    <md-radio-button ng-style="myObj"></md-radio-button>

但这会产生另一个问题，我希望单选按钮的圆圈在该区域内居中，例如this image。

有没有办法使单选按钮在区域内居中并保持填充，或者有没有其他方法可以增加可点击区域并保持按钮居中？

【问题讨论】：

你会把按钮标签的内容/文本放在哪里？

标签： javascript html css angularjs angularjs-material

【解决方案1】：

如果你愿意，你可以自己做，见例子：

.btn-padding {
    background: lime;
    
    padding: 14px;
}

&lt;md-radio-button ng-style="myObj" class="btn-padding"&gt;Write Text&lt;/md-radio-button&gt;

【讨论】：