Reputation: 2496
I have two ion-search bar, I need to change the placeholder and clear icon color for one of them only .
<ion-searchbar class="search-bar"
placeholder="search"></ion-searchbar>
i need to change the placeholder and clear icon color specific for this ion-searchbar not globally so another ion-search bar will still have the default colors... anyone have any idea. thanks in advance.
Upvotes: 3
Views: 7509
Reputation: 63
I realized that it is a background image and I replaced it with the icon of ionic, in my case material design (You can search de content property by searching in ionic css using icon name)
.searchbar-input-container {
.searchbar-clear-icon {
background-image: none;
}
.searchbar-clear-icon:before {
font-family: "Ionicons";
content: "\f2bf";
color: blue;
}
}
Upvotes: 3
Reputation: 2496
i found a solution only css:
.searchbar-input-container{
.searchbar-input{
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: white;
}
&::-moz-placeholder { /* Firefox 19+ */
color: white;
}
&:-ms-input-placeholder { /* IE 10+ */
color: white;
}
&:-moz-placeholder { /* Firefox 18- */
color: white;
}
}
.searchbar-clear-icon{
filter: invert(100);
}
change the place holder color to white and filter invert(100) reflect the black to white (not the optimal solution but instead of changing the img url you can do that)
Upvotes: 3
Reputation: 6568
Here is one solution if you are handling this with css use [style] attribute and call a function which will return the exact class you want.
@Component({
selector: 'my-app',
template: `
<ion-searchbar [style]="getStyle()" class="search-bar"
placeholder="search"></ion-searchbar>
`
})
export class App {
getStyle() {
// snip snip -> fetch the url from somewhere
const profilePicUrl = 'some-remote-server-url.jpg';
const style = `background-image: url(${profilePicUrl})`;
return style;
}
}
Upvotes: 3