diff --git a/less/control.less b/less/control.less index bb23102630..a88bb51fba 100644 --- a/less/control.less +++ b/less/control.less @@ -8,11 +8,13 @@ .Select-focus-state(@color) { border-color: @color; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px fade(@color, 10%); + background: @select-input-bg-focus; } // "classic" focused styles: maintain for legacy .Select-focus-state-classic() { border-color: @select-input-border-focus lighten(@select-input-border-focus, 5%) lighten(@select-input-border-focus, 5%); box-shadow: @select-input-box-shadow-focus; + background: @select-input-bg-focus; } // base @@ -67,6 +69,10 @@ } } + &.is-focused > .Select-control { + background: @select-input-bg-focus; + } + &.is-focused:not(.is-open) > .Select-control { .Select-focus-state(@select-input-border-focus); } @@ -90,6 +96,10 @@ outline: none; text-decoration: underline; } + + &:focus { + background: @select-input-bg-focus; + } } } @@ -128,6 +138,7 @@ .Select-input:focus { outline: none; + background: @select-input-bg-focus; } } diff --git a/less/select.less b/less/select.less index abf0eead2f..150d919c4f 100644 --- a/less/select.less +++ b/less/select.less @@ -15,6 +15,7 @@ // control options @select-input-bg: #fff; @select-input-bg-disabled: #f9f9f9; +@select-input-bg-focus: @select-input-bg; @select-input-border-color: #ccc; @select-input-border-radius: 4px; @select-input-border-focus: @select-primary-color; diff --git a/scss/control.scss b/scss/control.scss index d682acee93..08435e1aaf 100644 --- a/scss/control.scss +++ b/scss/control.scss @@ -54,6 +54,10 @@ } } + &.is-focused > .Select-control { + background: $select-input-bg-focus; + } + &.is-focused:not(.is-open) > .Select-control { border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%); box-shadow: $select-input-box-shadow-focus; @@ -79,6 +83,10 @@ outline: none; text-decoration: underline; } + + &:focus { + background: $select-input-bg-focus; + } } } @@ -117,6 +125,7 @@ .Select-input:focus { outline: none; + background: $select-input-bg-focus; } } diff --git a/scss/select.scss b/scss/select.scss index 699dc19687..c1b3fae420 100644 --- a/scss/select.scss +++ b/scss/select.scss @@ -12,6 +12,7 @@ // control options $select-input-bg: #fff !default; $select-input-bg-disabled: #f9f9f9 !default; +$select-input-bg-focus: $select-input-bg !default; $select-input-border-color: #ccc !default; $select-input-border-radius: 4px !default; $select-input-border-focus: #08c !default; // blue