Admin bar frontend search CSS fixes

[afercia]

When the admin bar is displayed on the frontend, an additional search form appears on the right. The input field doesn't have an associated label (will open a separate ticket) but there are also some CSS glitches.

• on focus: the blue lens is not shown in all browsers (appears just on hover)
• IE8: needs some love

See screenshot before the patch:
modern browsers
IE8 search collapsed
IE8 search expanded

Screenshot after the patch:
modern browsers
IE8 search expanded

[afercia]

removes an !important used while debugging

[DrewAPicture]

Patch still applies. @afercia: Can you list the browsers you've tested this fix on with the patch applied?

[afercia]

[Edit] Last Latest Firefox, last latest Chrome, IE 8 :)

[helen]

Why do we need to add that class in JS?

[afercia]

Replying to helen:

Why do we need to add that class in JS?

To correctly display the blue lens when the input field is focused.

[afercia]

To more clearly explain what this data uri image does and fixes:

#wpadminbar.ie8 > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input {
	/* IE8 z-index bug with transparent elements */
	background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");
}

please refer for example to ​http://stackoverflow.com/questions/9109911/ie-z-index-trouble-on-element-with-transparent-background not sure this is still a bug in IE 9+ though, as reported on StackOverflow.
See also the screenshot below: IE 8 without the GIF and with the GIF

[helen]

In 32074:

Toolbar: Search item consistency for focus state and IE8.

props afercia.
fixes #31322.

[a4jp.com]

The contrast ratio is too low. Can the colors be fixed too?