"Custom" comboxbox does not use work with "focus"


In my app, I want to include a “searchfield” in the menubar. I use a comboxbox for this and changed its style so that the background images of the button work with the colour of the menubar.
I added the styles to my SCSS. It works nicely … with one exception. When the combobox has the focus, I see the blue frame of the textfield but the button remains grey. My SCSS is:

.menu .v-filterselect-button {
	overflow: hidden;
	width: 25px;
	height: 23px;
	background-position: 0 0;
	background-image: url(img/right.png); /** sprite-ref: verticals ; sprite-margin-bottom: 1px */
	cursor: default;
	margin-right: -25px;
.menu .v-filterselect-button:hover {
	background-image: url(img/right-hover.png); /** sprite-ref: verticals */
.menu .v-filterselect-button:active {
	background-image: url(img/right-pressed.png); /** sprite-ref: verticals */
.menu .v-filterselect-focus .v-filterselect-button {
	background-image: url(img/right-focus.png); /** sprite-ref: verticals */
.menu .v-filterselect-focus .v-filterselect-button:hover {
	background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */
.menu .v-filterselect-focus .v-filterselect-button:active {
	background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */

As a workaround, I disabled the blue frame completely by adding

.menu .v-filterselect {
	background-image: url(img/left.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
.menu .v-filterselect-input {
	background-image: url(img/center.png); /** sprite-ref: verticals; sprite-alignment: repeat */

to my SCSS (and adding the images).

As you can see, I’m no expert in stylesheetsbut I’m curious why I can’t define an overwrite for the “focus” style?
Any ideas - I’m using Firefox 21.