diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
index 6dda32e3b4..f133008f5e 100644
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -14,28 +14,6 @@
left: -9999px;
}
-.checkbox-on {
- display: none;
- pointer-events: none;
-}
-
-.checkbox-off {
- display: block;
- pointer-events: none;
-}
-
-.checkbox[aria-checked=true] {
-
- .checkbox-on {
- display: block;
- }
-
- .checkbox-off {
- display: none;
- }
-
-}
-
.checkbox[aria-disabled=true] {
opacity: 0.5;
color: gray;
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 98840c9959..0de96ac1a0 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -20,17 +20,16 @@ import {Icon} from '../icon/icon';
host: {
'[class.item]': 'item',
'[attr.aria-checked]': 'input.checked'
- },
- defaultProperties: {
- 'iconOff': 'ion-ios-circle-outline',
- 'iconOn': 'ion-ios-checkmark'
}
+ // defaultProperties: {
+ // 'iconOff': 'ion-ios-circle-outline',
+ // 'iconOn': 'ion-ios-checkmark'
+ // }
})
@IonicView({
template:
'
' +
'' +
'' +
diff --git a/ionic/components/checkbox/extensions/ios.scss b/ionic/components/checkbox/extensions/ios.scss
index 708f8e55dd..ccef6decd2 100644
--- a/ionic/components/checkbox/extensions/ios.scss
+++ b/ionic/components/checkbox/extensions/ios.scss
@@ -8,8 +8,14 @@ $checkbox-ios-color: #007aff;
.checkbox[mode="ios"] {
.media-checkbox {
+ height: 20px;
min-width: 20px;
color: $checkbox-ios-color;
+ background-color: $checkbox-ios-color;
+ }
+
+ &[aria-checked=false] .media-checkbox {
+ background-color: red;
}
}
diff --git a/ionic/components/checkbox/extensions/material.scss b/ionic/components/checkbox/extensions/material.scss
index 1e71163e9d..650caa88cb 100644
--- a/ionic/components/checkbox/extensions/material.scss
+++ b/ionic/components/checkbox/extensions/material.scss
@@ -19,6 +19,7 @@ $checkbox-md-color: #007aff;
.media-checkbox-outline {
min-width: 20px;
color: $checkbox-md-color;
+ background-color: $checkbox-md-color;
position: absolute;
top: 3px;
@@ -35,4 +36,8 @@ $checkbox-md-color: #007aff;
z-index: 2;
}
+ &[aria-checked=false] .media-checkbox-outline {
+ background-color: red;
+ }
+
}
diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts
new file mode 100644
index 0000000000..6616981f96
--- /dev/null
+++ b/ionic/components/checkbox/test/basic/e2e.ts
@@ -0,0 +1,3 @@
+it('should toggle checkbox state with label click', function() {
+ element(by.css('#appleLabel')).click();
+});
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index ec3738cd0a..a95408f556 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -1,7 +1,7 @@