diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx b/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx
index 4c6313d30..4fda46ae2 100644
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx
@@ -1,6 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
+require('./checkbox.less');
 
 const Checkbox = createClass({
 	getDefaultProps : function() {
@@ -31,8 +32,10 @@ const Checkbox = createClass({
 		const { text } = cm.lineInfo(n);
 		const id = [prefix, value, n].join('-');
 		return <React.Fragment>
-			<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
-			<label htmlFor={id}>{_.startCase(value)}</label>
+			<div className='widget-checkbox'>
+				<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
+				<label htmlFor={id}>{_.startCase(value)}</label>
+			</div>
 		</React.Fragment>;
 	}
 });
diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less b/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less
new file mode 100644
index 000000000..1e080af55
--- /dev/null
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less
@@ -0,0 +1,7 @@
+.widget-checkbox {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+}
\ No newline at end of file
diff --git a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less
index d586209a7..924467d01 100644
--- a/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less
+++ b/shared/naturalcrit/codeEditor/helpers/widget-elements/field/field.less
@@ -1,7 +1,7 @@
 .widget-field {
   display: inline-block;
   flex: 0 0 auto;
-  background-color: #22d4f6;
+  background-color: #ddd;
   border-radius: 10px;
   padding: 4px 2px;
 
@@ -12,7 +12,7 @@
   }
 
   >input {
-    background-color: #22d4f6;
+    background-color: #ddd;
     border: none;
   }
 
diff --git a/shared/naturalcrit/codeEditor/helpers/widgets.js b/shared/naturalcrit/codeEditor/helpers/widgets.js
index 00ea67a43..7585c6d61 100644
--- a/shared/naturalcrit/codeEditor/helpers/widgets.js
+++ b/shared/naturalcrit/codeEditor/helpers/widgets.js
@@ -2,7 +2,7 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
 require('./widget-elements/hints/hints.jsx');
-const { Checkbox, Field } = require('./widget-elements');
+const { Field, Checkbox } = require('./widget-elements');
 
 // See https://codemirror.net/5/addon/hint/css-hint.js for code reference
 const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
@@ -75,7 +75,6 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
 		return result;
 	};
 
-	const { Field, Checkbox } = require('./widget-elements');
 	const widgetOptions = widgets.map((widget)=>({
 		name         : widget.name,
 		pattern      : PATTERNS.snippet[widget.type](widget.name),