Checkbox - Material — ContextQMD

@ngdoc content @name checkbox @description

<h2> CSS Styles</h2>

The css decalaration of the <md-checkbox> component is:

<hljs lang="css"> md-checkbox { margin: 8px; cursor: pointer; padding-left: 18px; padding-right: 0; line-height: 26px; min-width: 18px; min-height: 18px; } </hljs> <h3> Ink color</h3> <p>In order to change the color when the checkbox is checked:</p>

<hljs lang="html"> <md-checkbox class="green"> Green Checkbox </md-checkbox> </hljs> <hljs lang="css"> md-checkbox.md-checked.green .md-icon { background-color: rgba(0, 255, 0, 0.87); } </hljs> <h3> Disabled</h3> <p>In order to change the color when a disabled checkbox is checked:</p>

<hljs lang="html"> <md-checkbox ng-disabled="true" class="red" ng-model="data.cb4" ng-init="data.cb4=true"> Checkbox: Disabled, Checked </md-checkbox> </hljs> <hljs lang="css"> md-checkbox.md-checked[disabled].red .md-icon { background-color: rgba(255, 0, 0, 0.26); } </hljs> <h3> Borders</h3> <p>In order to add a custom border do the following:</p>

<hljs lang="html"> <div> <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" ng-false-value="'nope'"> Default Border </md-checkbox> </div> <div> <md-checkbox ng-model="data.cb2" aria-label="Checkbox 2" ng-true-value="'yup'" class="dotted" ng-false-value="'nope'"> Custom Border </md-checkbox> </div> </hljs> <hljs lang="css"> md-checkbox.dotted .md-icon { border-width: 1px; border-style: dashed; } </hljs> <h3> Bi-Di </h3>

The mdCheckbox directive supports bi-directional specifiers in the <html dir="rtl"> tag: