オフィスUIファブリックのチェックボックスとラジオボタンのサイズを小さくする方法

Question

Microsoft Officeオンライン用のWebアプリケーションアドインを開発しています。リンクに表示されているhttp://dev.office.com/fabric/components/choicefieldラジオとチェックボックスボタンを使用しています。

これらのコントロールのサイズを減らす方法は、基本的にラジオとチェックボックスです。これらのコントロールのサイズは、私が予想しているものよりも大きいです。

Answer 1

ChoiceField.cssこれらのコントロールに関連する規則は次のとおりです。状態を確認：はとトップ中央には、左それらサイズにと幅と高さを変更します。

ラジオボタン：

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