css - オフィス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;
}

チェックボックス:

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