角度のある材料チェックボックスと奇妙な間隔

Question

角度のある材料チェックボックスを置くパネルがあります。パネルが黒いので、チェックボックスの背景色を白に設定して、そこにあることをユーザーに示します。しかし、チェックボックスの右側にいくつかのスペースが追加されていますが、削除できないようです。誰でもこれを修正する方法を知っていますか？私はあなたがこのCSSルールを試すべきだと思い0にパディングを設定すると

<div id="chartWrapper-{{$index}}" style="position: relative"> 
     <div id="chartTopPanel-{{$index}}" 
      style="position: absolute; display: none; left:0; top:0; height: 15%; width: 100%; opacity: 1; background-color: darkslategrey; z-index: 100;"> 
        <md-checkbox id="chartSelect-{{$index}}" style=" 
        position: absolute; margin:10px; background-color: white; padding-right: 0" > 
        </md-checkbox> 
     </div>    
</div> 

Answer 1

動作しないこの空白は、チェックボックスのアイコンが原因ではなく、そのラベルに

。

md-checkbox ._md-label 
{ 
margin-left: 20px; 
} 

Answer 2

これが私の解決策のようになります。

.my-checkbox { 
    margin: 10px !important; /* Not really required */ 
    background-color: white; 
    width: 20px; 
    height: 20px; 
    border-radius: 2px; 
    color: white; 
} 

CodePen

Answer 3

は全体のチェックボックスコンポーネントに背景を追加しないでください。

md-checkbox ._md-container { 
    background: #fff; 
} 

このソリューションを変更するには、CSSクラスを使用できます。