How to change colour of a searchbar text and icon?

I have an Ionic 2 app, that has an ion-searchbar.

      <div id="search" class="search-input-keyword">
        <ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)"
          (change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
          debounce="1"></ion-searchbar>
      </div>

enter image description here

I would like to change the input text color, and the magnifying glass icon color to #fff.

I have read here, that in order to do so, you need to change the sass variables.

I have tried the following in variables.scss:

$colors: (
  primary:    #009196,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
$searchbar-ios-input-text-color: #fff;
$searchbar-ios-input-search-icon-color: #fff;

But there is no effect.

However, the following line does have an effect:

$text-color: #000099;

So I guess that the $searchbar-ios-input-text-color: #fff; and $searchbar-ios-input-search-icon-color: #fff; are the issue.

Question

Can anyone please advise how to change the font and icon colours?

Thanks

UPDATE

Here is some more code samples:

css

.toolbar-background-md {
    background: linear-gradient(to bottom right, #00a7ad, #004547);
}

.bar-button-default-md {
  color: #fff;
}

.searchbar-md .searchbar-input {
  background: linear-gradient(to bottom right, #009da3, #018287);
  //background-color: #009196;
}

input::-webkit-input-placeholder {
  color: red ;
}
input:-moz-placeholder {
  color: red ;
}
input:-ms-input-placeholder { /* IE10+ */
  color: red ;
}

.toolbar-title-md {
  padding: 0 12px;
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
}

.close-filters {
    color: #fff;
    width: 52px;
    font-size: 22px;
    background-color: transparent;
    box-shadow: none !important;
}

.slide-fade-hide {
  transition: 1s all linear;
  opacity: 0;
  height: 0;
  position: absolute;
  top: 0;
  z-index: -10;
}

.slide-fade-show {
  transition: all 1.2s ease-in;
  opacity: 1;
  height: 2em;
  z-index: 1;
}

.list-md {
    margin: 0px 0px 0px 0;
}
.scroll-up {
    margin-top: 20px;
}

.menu-title {
    padding: 1px 95px 1px 10px;
}

.menu-toolbar {
    padding: 35px;
}

.menu-content {
    position: relative !important;
}

.item-search-wanted {
    padding-left: 1px;
}

.item-search-offered {
    padding-left: 1px;
}

.job-content-offered {
    background-color: white !important;
}

.job-content-wanted {
    background-color: white !important;
}

.search-button-star {
    background-color: #009196; 
}

.search-input-keyword {
    width: 125%;
    display: flex;
}

.search-input {
    width: 125%;
}

.toolbar-content {
  display: flex;
}

.extra-search-col {
    padding: 0px;
}

ion-col {
    padding: 2px;
}

ion-title {
    z-index: 11;
}

ion-avatar img {
    border-radius: 2.8rem;
    max-height: 5.6rem;
    max-width: 5.6rem;
}

.small-text-search {
    font-size: 75% !important;
    color: grey !important;
    padding-top: 4px;
}

.small-text-search-desc {
    font-size: 85%;
}

.small-text-search-rating {
    padding-top: inherit;
    padding-left: inherit;
}

.small-text-search-starrating {
    padding-top: 2px;
    font-size: 100% ! important;
}

.search-category {
    float: right;
}

.job-tite {
    width: 250px;
}

.job-timestamp {
    white-space: nowrap;
}

.search-rating {
    float: left;
}

.search-popover-button {
    width: 75px;
    height: 75px;
}

.button-icon-only ion-icon.search-popover-icon {
    font-size: 2.8em;
}

.filter-image {
    -webkit-filter : hue-rotate(-30deg) opacity(100%);
    filter : hue-rotate(-30deg) opacity(100%);
}

.icon-text {
    padding-left: 5px;
    padding-bottom: 3px;
}

.icon-text-no {
    padding-left: 5px;
}

Hello,

Here is what did: I got the background image for the search icon using chrome developer tools. This is the result:

url(“data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%235b5b5b'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>”)

the value after fill= is your color, so to change it to fff
replace
fill=’%235b5b5b**'
with
fill=‘fff’

same with the input.

so in your scss file add:

.searchbar-search-icon {
background-image: url(“data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='fff'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>”) !important;
}

.searchbar-md .searchbar-input {
color: #fff;
}

Thank you
Bill

1 Like

I have tried this. But it’s not working

See: How to change the search icon color of the ion -searchbar?

I have tried putting below line in variable.scss file and it works fine.

$searchbar-md-input-search-icon-color: red;

As i see you are working on android and using “md” for everything, and in variables.scss you are writting ios, so instead of:
`$colors: (
primary: #009196,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
$searchbar**-ios-input-text-color: #fff;
$searchbar
-ios-**input-search-icon-color: #fff;

put:

$searchbar**-md-input-text-color: #fff;
$searchbar
-md-**input-search-icon-color: #fff;

`