2

This sounds so very simple:

hovering over the options of an Xpages comboBox they get some blue-ish background and white text color. Trying to alter this is driving me nuts. It obviously is NOT a simple css statement as in 

select option:hover{background-color: green;}

as it would be for some standard html code (that's why I didn't tag this with css and the like...). But what is it then? Firebug or Chrome's developer tools didn't help me much, really, although I'm sure I'm missing something

Edit (after question was closed):
I'm aware that there are numerous questions regarding similar topics. But none of them is dealing with xsp combo boxes. The one question linked by some of youo gives an interesting solution by recommending a box-shadow instead of a background-color. This is nice but not quite what I'm looking for:

  • opening the combo the selected value still has the default background; only whil hovering the background appears to be changed
  • using this method I only can "cast" a shadow but cannot alter the text color which - depending on the shadow color - can be necessary to make the options legible

But I like Knut's answer as it seems to be pointing in the right direction; some alterations are needed though; if the question hadn't been closed I could post my solution as an own answer; but so I put it down as a comment to Knut's answer

Lothar Mueller
  • 2,528
  • 1
  • 16
  • 29
  • What web browser(s) are you looking to support? – MonkeyZeus Dec 17 '13 at 17:34
  • 1
    That's **not** really a **duplicate** question as it is XPages related: *first*, you have to know that `xp:comboBox` gets rendered as a native HTML select control (and that's why hover background can't be changed) and *second* there is an alternative out of the box with `xe:djComboBox`. – Knut Herrmann Dec 18 '13 at 06:39
  • Re: @user2191572: it's supposed to support MSIE 8--10 and Chrome; but in fact it should work in any modern browser – Lothar Mueller Dec 18 '13 at 09:08
  • Re: @Knut: thanks for the input, and I agree: searching StackOverflow I had found numerous questions and answers, but all dealing with standard HTML select controls – Lothar Mueller Dec 18 '13 at 10:11
  • 1
    I'm glad to see you got it working, I think the root issue in question stems from the rules of style specificity. Feel free to read up on it if you have some free time. [smashingmagazine.com](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) – MonkeyZeus Dec 18 '13 at 13:13
  • +1 for that great article! It's going to be of some help in the future, I'm sure – Lothar Mueller Dec 18 '13 at 16:19

1 Answers1

2

You can't change this style for xp:comboBox. But, if you use xe:djComboBox from ExtLib then you can change style with:

.tundra .dijitMenuItemSelected  {
    background-color: green;
}

enter image description here

Knut Herrmann
  • 30,880
  • 4
  • 31
  • 67
  • Thanks for the answer which pointed in the right direction. I had to apply some alterations though, as "dijitMenuItemSelected" only applies for the short moment of clicking the item. For Hovering I finally found that "dijitMenuItem:hover" does the trick; I also tried "dijitMenuItemHover" which is applied while hovering the items, but somehow this one isn't triggering a change in style. – Lothar Mueller Dec 18 '13 at 10:25
  • Thanks for adding "dijitMenuItem:hover" although hovering works for me with just "dijitMenuItemSelected" (Notes 8.5.3) - might depend on version or browser - it's good to have your final solution. – Knut Herrmann Dec 18 '13 at 14:49