Hi,
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.
Cheers
Klaus