gistfile1.txt

diff --git c/src/ui/form/InputField.css i/src/ui/form/InputField.css
index 088fbc98..7946478e 100644
--- c/src/ui/form/InputField.css
+++ i/src/ui/form/InputField.css
@@ -4,13 +4,24 @@
   width: 100%;
 }
 
-.inputField-input[type="text"] {
+.inputField-input[type="text"],
+.inputField-input[type="number"] {
   width: 100%;
   appearance: none;
-  border: 1px solid $color-greySilver;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $color-greySilver;
   border-radius: 0;
   color: $color-black;
 
+  .inputField--focus.inputField--green & {
+    border-color: $color-green;
+  }
+
+  .inputField--focus.inputField--purple & {
+    border-color: $color-purple;
+  }
+
   &:focus {
     outline: none;
   }
diff --git c/src/ui/form/InputField.js i/src/ui/form/InputField.js
index b5ebca43..54b4a3c3 100644
--- c/src/ui/form/InputField.js
+++ i/src/ui/form/InputField.js
@@ -46,12 +46,26 @@ export class InputField extends Component {
     type: PropTypes.string.isRequired, // when passing type="file" for file uploads, use <FileUploadButtonField />
   };
 
+  state = {
+    hasFocus: false,
+  };
+
   componentDidMount() {
     if (this.props.isAutoFocused && this.$el) {
       this.$el.focus();
     }
   }
 
+  handleBlur = e => {
+    this.setState({hasFocus: false});
+    this.props.input.onBlur(e);
+  };
+
+  handleFocus = e => {
+    this.setState({hasFocus: true});
+    this.props.input.onFocus(e);
+  };
+
   handleClearButtonClick = () => {
     this.props.input.onChange('');
   };
@@ -83,9 +97,10 @@ export class InputField extends Component {
         className={classNames(
           !showErrorMessages && className,
           'inputField',
-          `inputField--${color}`,
           `inputField--${size}`,
           {
+            [`inputField--${color}`]: color,
+            'inputField--focus': this.state.hasFocus,
             'inputField--withErrorIcon': shouldShowErrorIcon,
             'inputField--withClearButton': showClearButton,
             'inputField--withError': showErrors,
@@ -101,6 +116,8 @@ export class InputField extends Component {
           className={classNames('inputField-input', inputClassName)}
           disabled={disabled}
           id={id}
+          onBlur={this.handleBlur}
+          onFocus={this.handleFocus}
           placeholder={placeholder}
           type={type}
         />
diff --git c/src/ui/form/LabeledSelectField.js i/src/ui/form/LabeledSelectField.js
index 2b66d322..9c7f99ab 100644
--- c/src/ui/form/LabeledSelectField.js
+++ i/src/ui/form/LabeledSelectField.js
@@ -1,3 +1,5 @@
 import SelectField from './SelectField';
 import withLabel from './withLabel';
-export default withLabel(SelectField);
+import withErrorMessage from './withErrorMessage';
+
+export default withErrorMessage(withLabel(SelectField));
diff --git c/src/ui/form/SelectField.css i/src/ui/form/SelectField.css
index 759539ca..d5d34a84 100644
--- c/src/ui/form/SelectField.css
+++ i/src/ui/form/SelectField.css
@@ -13,12 +13,22 @@ $selectField-fontSize: 12px;
   vertical-align: top;
   position: relative;
   padding-right: 29px;
-  border: 1px solid $color-greySilver;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $color-greySilver;
   color: $color-black;
   line-height: $selectField-height;
   font-size: $selectField-fontSize;
   height: $selectField-height;
 
+  &.selectField--focus.selectField--purple {
+    border-color: $color-purple;
+  }
+
+  &.selectField--focus.selectField--green {
+    border-color: $color-green;
+  }
+
   &::before {
     display: block;
     content: "";
diff --git c/src/ui/form/SelectField.js i/src/ui/form/SelectField.js
index 2f099730..93f029b3 100644
--- c/src/ui/form/SelectField.js
+++ i/src/ui/form/SelectField.js
@@ -51,6 +51,9 @@ export class SelectField extends Component {
   constructor(props, context) {
     super(props, context);
     this.lookup = this.buildOptionsLookup(props.options);
+    this.state = {
+      hasFocus: false,
+    };
   }
 
   componentWillReceiveProps(nextProps) {
@@ -67,12 +70,22 @@ export class SelectField extends Component {
     }, {});
   }
 
+  handleBlur = e => {
+    this.setState({hasFocus: false});
+    this.props.input.onBlur(e);
+  };
+
   handleChange = e => {
     const {onChange, input} = this.props;
     onChange(e);
     input.onChange(e);
   };
 
+  handleFocus = e => {
+    this.setState({hasFocus: true});
+    this.props.input.onFocus(e);
+  };
+
   render() {
     const {
       ariaLabelledby,
@@ -100,8 +113,9 @@ export class SelectField extends Component {
           'selectField--withPadding': withPadding,
           'selectField--withExtraPadding': withExtraPadding,
           'selectField--disabled': disabled,
-          'selectField--purple': color === COLORS.PURPLE,
           'selectField--error': shouldDisplayMetaError(meta),
+          'selectField--focus': this.state.hasFocus,
+          [`selectField--${color}`]: color,
         })}
       >
         <select
@@ -110,7 +124,9 @@ export class SelectField extends Component {
           className="selectField-select"
           disabled={disabled}
           id={id}
+          onBlur={this.handleBlur}
           onChange={this.handleChange}
+          onFocus={this.handleFocus}
         >
           {placeholder && <option value="">{placeholder}</option>}
           {options.map(({key, label, value}) => (