Add focus variables

sass/elements/form.sass

@@ -8,6 +8,8 @@ $input-hover-border-color: $grey-light !default
 
 $input-focus-color: $grey-darker !default
 $input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
 
 $input-disabled-color: $text-light !default
 $input-disabled-background-color: $background !default
@@ -51,6 +53,7 @@ $help-size: $size-small !default
   &:active,
   &.is-active
     border-color: $input-focus-border-color
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
   &[disabled]
     background-color: $input-disabled-background-color
     border-color: $input-disabled-border-color
@@ -140,13 +143,6 @@ $help-size: $size-small !default
     font-size: 1em
     max-width: 100%
     outline: none
-    &:hover
-      border-color: $input-hover-border-color
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active
-      border-color: $input-focus-border-color
     &::-ms-expand
       display: none
     &[disabled]:hover
@@ -167,6 +163,11 @@ $help-size: $size-small !default
     $color: nth($pair, 1)
     &.is-#{$name} select
       border-color: $color
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small