modify search widget border colour

1079
4
Jump to solution
01-30-2017 06:01 PM
AnneShanahan
New Contributor II

I'd like the change the border colour of the search widget. It defaults to black and I'd like to make it blue. I've tried the style.css in widget\Search\css but am having no luck. Does any one know where I can change this?

TIA

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Anne,

   So if you are wanting the background of the right and left icons to be blue then you need all these rules:

.arcgisSearch .searchBtn,
.arcgisSearch .searchGroup .searchInput {
  border: 1px solid #0000ff;
}

.arcgisSearch .searchBtn,
.arcgisSearch .esri-icon-down-arrow {
  background-color: #0000ff;
}

.jimu-widget-search .arcgisSearch .searchBtn:hover,
.jimu-widget-search .arcgisSearch .searchBtn:focus {
    background-color: #0000ff;
    color: white;
}

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Anne,

  Add this css rule:

.arcgisSearch .searchBtn,
.arcgisSearch .searchGroup .searchInput {
  border: 1px solid #0000ff;
}
AnneShanahan
New Contributor II

Thanks, that worked.  Would like to expand it to the entire search bar including the drop-down arrow to the left and the eye glass  to the right boarders but this is a great start, thank you  

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Anne,

   So if you are wanting the background of the right and left icons to be blue then you need all these rules:

.arcgisSearch .searchBtn,
.arcgisSearch .searchGroup .searchInput {
  border: 1px solid #0000ff;
}

.arcgisSearch .searchBtn,
.arcgisSearch .esri-icon-down-arrow {
  background-color: #0000ff;
}

.jimu-widget-search .arcgisSearch .searchBtn:hover,
.jimu-widget-search .arcgisSearch .searchBtn:focus {
    background-color: #0000ff;
    color: white;
}

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

AnneShanahan
New Contributor II

thank you that worked

0 Kudos