Angular Material Kontrollkästchen und seltsamen Abstand

Question

Ich habe ein Panel, wo ich eckigen Material Kontrollkästchen. Da das Feld schwarz ist, setze ich die Hintergrundfarbe des Kontrollkästchens auf weiß, um dem Benutzer anzuzeigen, dass es dort ist. Es gibt jedoch einige Abstände rechts neben dem Kontrollkästchen, die ich nicht loswerden kann. Weiß jemand, wie man das repariert? Einstellen Padding auf 0 funktioniert nicht

<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

Diese Leerzeichen nicht auf das Kontrollkästchen Symbol ist aber aufgrund seiner Label

Ich denke, sollten Sie diese CSS-Regel versuchen.

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

Answer 2

Das wäre meine Lösung sein:

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

CodePen

Answer 3

Fügen Sie keinen Hintergrund ganze Checkbox-Komponente. sondern nur Hintergrund zu seinem Container (Checkbox-Bereich)

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

Sie können CSS-Klasse verwenden, um diese Lösung zu ändern.