topic Re: modify search widget border colour in ArcGIS Web AppBuilder Questions

modify search widget border colour

AnneShanahan — Tue, 31 Jan 2017 02:01:19 GMT

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

Re: modify search widget border colour

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:49:07 GMT

Anne,

Add this css rule:

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

Re: modify search widget border colour

AnneShanahan — Mon, 13 Feb 2017 22:24:26 GMT

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

Re: modify search widget border colour

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:49:09 GMT

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.

Re: modify search widget border colour

AnneShanahan — Tue, 14 Feb 2017 02:29:59 GMT

thank you that worked