See this StackOverflow answer: https://stackoverflow.com/a/18853002/4633828
This isn't a perfect fix - we have to set `color` explicitly, rather
than use `inherit`, because we want the text color to be the same when
the select element is focused. That means both `color` and
`text-shadow`'s color have to be explicitly set to the same thing
(otherwise they might not match). Yay, hacks!
..since it's the only property which actually animates. (The background
image also changes on hover/focus, but that isn't visually effected by
transition, so we ignore it.)
This is for the next commit. Without this, the focus ring slowly
disappears, and the text slowly becomes the color it's meant to be;
neither of those are good.
/cc @carljbowman
One issue we ran into is that our `frameless` configuration is in `em` rather than `rem`, making it difficult to have an aboslute grid applied uniformly at all hierarchies. For now, we're using straight `rem` calculations instead of `$cols{1,8}` in the styling until we can refactor `frameless` to use `em`.
