Css 不是全局更改离子搜索栏的占位符和清除图标颜色吗？

我有两个离子搜索栏，我需要改变占位符和清除其中一个图标的颜色只

<ion-searchbar class="search-bar"
                placeholder="search"></ion-searchbar>

我需要更改占位符并清除此离子搜索栏的特定图标颜色，而不是全局更改，以便其他离子搜索栏仍具有默认颜色。。。 谁都知道。

---

提前感谢。

如果您使用css处理此问题，这里有一个解决方案 [style]属性并调用一个函数，该函数将返回您想要的确切类

     @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;
      }

    }

@组件({
选择器：“我的应用程序”，
模板：`
`
})
导出类应用程序{
getStyle（）{
//snip-snip->从某处获取url
const profilePicUrl='some remote server url.jpg'；
const style=`background image:url（${profilePicUrl}）`；
回归风格；
}
}

我发现了一个仅用于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);
          }

将占位符颜色更改为白色

---

和过滤器反转（100）将黑变白（不是最佳解决方案，但不是改变img url，你可以这样做）

我意识到这是一个背景图像，我用ionic的图标替换了它，在我的例子中是material design（你可以使用图标名在ionic css中搜索内容属性）

---

您是如何通过CSS处理占位符更改和清除图标颜色的？我尝试了以下方法：页面搜索离子内容表单。搜索栏。搜索栏输入容器。搜索栏清除图标{color:white；}但我注意到清除按钮是一个图像，所以我不知道如何在不更改图像的情况下更改颜色抱歉，我无法理解您，你想在这方面取得什么成就？这是一个事实，你不能改变图像颜色的CSS，除非你改变了图像。我需要改变颜色的清晰图标和颜色的占位符。

.searchbar-input-container {
   .searchbar-clear-icon {
      background-image: none;
   }

   .searchbar-clear-icon:before {
      font-family: "Ionicons";
      content: "\f2bf";
      color: blue;
   }
}