css - 如何减小 Office ui 结构中复选框和单选按钮的大小

Question

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

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

Answer 1

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

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

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

https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox#implementation

Answer 2

在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;
}

复选框：

.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;
}