如何减少Office ui构造中的复选框和单选按钮的大小

Question

我正在为Microsoft Office Online开发一个Web应用程序加载项。 我正在使用http://dev.office.com/fabric/components/choicefield单选和复选框按钮，如链接所示。

如何减少这些控件的大小基本上是单选和复选框。这些控件的大小比我期望的要大。

Answer 1

在ChoiceField.css中 ，与这些控件相关的规则如下： 更改宽度和高度以调整大小 ，并在左侧和顶部将：checked状态居中 。

单选按钮 ：

.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before {
  background-color: #666666;
  border-color: #666666;
  color: #666666;
  border-radius: 50%;
  content: '\00a0';
  display: inline-block;
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 5px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
}

.ms-ChoiceField-field:after {
  content: '';
  display: inline-block;
  border: 1px #c8c8c8 solid;
  width: 19px;
  height: 19px;
  cursor: pointer;
  position: relative;
  font-weight: normal;
  left: -1px;
  top: -1px;
  border-radius: 50%;
  position: absolute;
}

Ckeckbox ：

.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: 'Office365Icons';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  content: '\e041';
  background-color: transparent;
  border-radius: 0;
  font-size: 13px;
  top: 3px;
  left: 3px;
}

.ms-ChoiceField-field:after {
  content: '';
  display: inline-block;
  border: 1px #c8c8c8 solid;
  width: 19px;
  height: 19px;
  cursor: pointer;
  position: relative;
  font-weight: normal;
  left: -1px;
  top: -1px;
  border-radius: 50%;
  position: absolute;
}

Answer 2

如果使用UI Fabric React，则可以使用api直接设置复选框的样式，例如：

render() {
  const styles = {
    checkbox: {
      width: "16px",
      height: "16px"
    }
  }

  return <Checkbox
    label="Checkbox"
    styles={styles}
  />
}

https://developer.microsoft.com/zh-CN/fabric#/controls/web/checkbox#implementation