diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js
index 7a177d7e6..738bf9427 100644
--- a/src/definitions/modules/checkbox.js
+++ b/src/definitions/modules/checkbox.js
@@ -56,14 +56,13 @@ $.fn.checkbox = function(parameters) {
initialize: function() {
module.verbose('Initializing checkbox', settings);
- module.fix.input();
-
module.create.label();
module.bind.events();
+
module.set.tabbable();
+ module.hide.input();
module.observeChanges();
-
module.instantiate();
module.setup();
},
@@ -85,9 +84,10 @@ $.fn.checkbox = function(parameters) {
},
fix: {
- input: function() {
+
+ reference: function() {
if( $module.is(selector.input) ) {
- module.debug('Fixing incorrect reference to module in invocation');
+ module.debug('Behavior called on adjusting invoked element');
$module = $module.closest(selector.checkbox);
module.refresh();
}
@@ -126,6 +126,13 @@ $.fn.checkbox = function(parameters) {
$input = $module.children(selector.input);
},
+ hide: {
+ input: function() {
+ module.verbose('Modfying z-index');
+ $input.addClass(className.hidden);
+ }
+ },
+
observeChanges: function() {
if('MutationObserver' in window) {
observer = new MutationObserver(function(mutations) {
@@ -675,6 +682,7 @@ $.fn.checkbox.settings = {
checked : 'checked',
indeterminate : 'indeterminate',
disabled : 'disabled',
+ hidden : 'hidden',
radio : 'radio',
readOnly : 'read-only'
},
diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
index e3e171296..cd4e768c4 100755
--- a/src/definitions/modules/checkbox.less
+++ b/src/definitions/modules/checkbox.less
@@ -30,27 +30,26 @@
.ui.checkbox {
position: relative;
display: inline-block;
+ backface-visibility: hidden;
+ outline: none;
+ vertical-align: baseline;
min-height: @checkboxSize;
-
- font-size: 1rem;
+ font-size: @medium;
line-height: @checkboxLineHeight;
min-width: @checkboxSize;
- backface-visibility: hidden;
-
- outline: none;
- vertical-align: baseline;
}
.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
+ cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
- width: @checkboxSize;
- height: @checkboxSize;
opacity: 0 !important;
outline: none;
- z-index: -1;
+ z-index: 3;
+ width: @checkboxSize;
+ height: @checkboxSize;
}
@@ -253,6 +252,18 @@
color: @disabledCheckboxLabelColor;
}
+/*--------------
+ Hidden
+---------------*/
+
+/* Initialized checkbox moves input below element
+ to prevent manually triggering */
+.ui.checkbox input[type="checkbox"].hidden,
+.ui.checkbox input[type="radio"].hidden {
+ z-index: -1;
+}
+
+
/*******************************
Types
diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
index 0c7387682..f3fc58c36 100644
--- a/src/themes/default/modules/checkbox.variables
+++ b/src/themes/default/modules/checkbox.variables
@@ -6,6 +6,7 @@
@checkboxColor: @textColor;
@checkboxLineHeight: @checkboxSize;
+
/* Label */
@labelDistance: 1.85714em; /* 26px @ 14/em */