eSearch widget hover and focus color questions

[JasonStanton__GISP]

This may sound silly, but I am trying to figure out the correct code to change the colors of the following in the eSearch widget:

1. Search expression drop-down (see Capture1.PNG)
2. Search expression value (when in drop-down mode) as this appears to be different code than above see Capture2.PNG)
3. The 'highlight' color around the input box of the expression value when it is focused (see Capture3.PNG)

Any assistance would be greatly appreciated!

Jason

[RobertScheitlin__GISP]

Jason,

   That is a lot of dojo dijit theme'ing.

.claro .dijitTextBoxFocused {
  border-color: #5a7b4d !important;
  box-shadow: 0px 0px 5px #5a7b4d;
}

.claro .dijitMenu {
  background-color: #ffffff;
  border: 1px solid #5a7b4d;
}

.claro div.dijitMenuItem.dijitMenuItemHover {
  background-color: #5a7b4d;
  border-top-color: #5a7b4d;
}

.claro .dijitComboBox>div.dijitArrowButton.dijitDownArrowButtonHover {
  background-color: #5a7b4d;
}

.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
.claro .dijitComboBox .dijitDownArrowButtonHover,
.claro .dijitComboBoxFocused .dijitArrowButton {
  background-color: #5a7b4d;
}

.claro .dijitTextBoxHover {
  border-color: #5a7b4d;
  background-color: #c2e5b2;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JasonStanton__GISP]

Robert,

Thanks very much.  I am still having one issue, which is the hover for the drop-down related to the search alias.  I notice that on lines 11 and 16 above the text is green, but in my CSS it is black.  So I'm guessing this is the code that isn't working for me???  Any ideas how to address it?

[RobertScheitlin__GISP]

Jason,

   More screenshot would help better. In have not added anything in the css rules I shared to change the text color.

[JasonStanton__GISP]

My aplogies for being confusing... I simply mean that when I copy your code into my CSS the word "div" comes through black.  I generally associate this as being bad/incorrect.

[RobertScheitlin__GISP]

Nope that is fine. Div is a html type and not a class so not will not be green.

[JasonStanton__GISP]

ok, thanks, but after adding the code the hover for the search alias is still grey, while the color for the parcel id drop-down is correct (light blue)

[RobertScheitlin__GISP · Accepted solution]

Jason,

   OK here is a more complete set of rules:

.claro .dijitTextBoxFocused,
.claro .dijitValidationTextBoxFocused {
  border-color: #5a7b4d !important;
  box-shadow: 0px 0px 5px #5a7b4d;
}

.claro .dijitSelectFocused,
.claro .dijitSelectFocused .dijitButtonContents,
.claro .dijitTextBoxFocused,
.claro .dijitTextBoxFocused .dijitButtonNode,
.claro .dijitSelectHover,
.claro .dijitSelectHover .dijitButtonContents,
.claro .dijitTextBoxHover,
.claro .dijitTextBoxHover .dijitButtonNode,
.claro .dijitValidationTextBoxHover{
  border-color: #5a7b4d;
}

.claro .dijitMenu {
  background-color: #ffffff;
  border: 1px solid #5a7b4d;
}

.claro div.dijitMenuItem.dijitMenuItemHover,
.claro .dijitMenuItem .dijitMenuItemHover td,
.claro .dijitMenu .dijitMenuItemSelected td {
  background-color: #5a7b4d;
  border-top-color: #5a7b4d;
  border-bottom-color: #5a7b4d;
}

.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode,
.claro .dijitComboBox .dijitDownArrowButtonHover,
.claro .dijitComboBoxFocused,
.claro .dijitTextBoxFocused .dijitArrowButton {
  background-color: #5a7b4d;
}

.claro .dijitTextBoxHover {
  border-color: #5a7b4d;
  background-color: #c2e5b2;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JasonStanton__GISP]

That did the trick!  Specifically 

.claro .dijitMenuItem .dijitMenuItemHover td

Much appreciated!  Thanks!