diff --git a/build/media/system/js/fields/select-colour.js b/build/media/system/js/fields/select-colour.js
deleted file mode 100644
index 0a06b2bc1ebe6..0000000000000
--- a/build/media/system/js/fields/select-colour.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
- * @license     GNU General Public License version 2 or later; see LICENSE.txt
- */
-
-/**
- * Update colour for selectbox
- */
-Joomla = window.Joomla || {};
-
-(function(Joomla) {
-	'use strict';
-
-	Joomla.updateSelectboxColour = function () {
-		var colourSelects = document.querySelectorAll('.custom-select-color-state');
-		for (var i = 0, l = colourSelects.length; i < l; i++) {
-			// Add class on page load
-			var selectBox = colourSelects[i];
-			if (selectBox.value == 1) {
-				selectBox.classList.add('custom-select-success');
-			}
-			else if (selectBox.value == 0) {
-				selectBox.classList.add('custom-select-danger');
-			}
-
-			// Add class when value is changed
-			selectBox.addEventListener('change', function() {
-				var self = this;
-				self.classList.remove('custom-select-success', 'custom-select-danger');
-				if (self.value == 1) {
-					self.classList.add('custom-select-success');
-				}
-				else if (self.value == 0 || self.value == parseInt(-2)) {
-					self.classList.add('custom-select-danger');
-				}
-			});
-		}
-	};
-
-	document.addEventListener('DOMContentLoaded', function() {
-		Joomla.updateSelectboxColour();
-	});
-
-})(Joomla);
diff --git a/build/media_src/system/js/fields/select-colour.es6.js b/build/media_src/system/js/fields/select-colour.es6.js
new file mode 100644
index 0000000000000..85c0d2c9acd22
--- /dev/null
+++ b/build/media_src/system/js/fields/select-colour.es6.js
@@ -0,0 +1,47 @@
+/**
+ * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+(() => {
+  'use strict';
+
+  const onChange = (event) => {
+    const self = event.target;
+    const value = parseInt(self.value, 10);
+
+    self.classList.remove('custom-select-success', 'custom-select-danger');
+
+    if (value === 1) {
+      self.classList.add('custom-select-success');
+    } else if (value === 0 || value === -2) {
+      self.classList.add('custom-select-danger');
+    }
+  };
+
+  const updateSelectboxColour = () => {
+    const colourSelects = [].slice.call(document.querySelectorAll('.custom-select-color-state'));
+
+    colourSelects.forEach((colourSelect) => {
+      const value = parseInt(colourSelect.value, 10);
+
+      // Add class on page load
+      if (value === 1) {
+        colourSelect.classList.add('custom-select-success');
+      } else if (value === 0) {
+        colourSelect.classList.add('custom-select-danger');
+      }
+
+      // Add class when value is changed
+      colourSelect.addEventListener('change', onChange);
+    });
+
+    // Cleanup
+    document.removeEventListener('DOMContentLoaded', updateSelectboxColour, true);
+  };
+
+  // On docunment loaded
+  document.addEventListener('DOMContentLoaded', updateSelectboxColour, true);
+
+  // On Joomla updated
+  document.addEventListener('joomla:updated', updateSelectboxColour, true);
+})();