不在全局范围内更改离子搜索栏的占位符和清除图标颜色？答案

【问题标题】：change placeholder and clear-icon color for ion-search bar not globally?不在全局范围内更改离子搜索栏的占位符和清除图标颜色？
【发布时间】：2018-07-24 19:21:45
【问题描述】：

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

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

我需要更改此离子搜索栏特定的占位符并清除图标颜色，而不是全局更改，因此另一个离子搜索栏仍将具有默认颜色... 任何人都有任何想法。提前致谢。

【问题讨论】：

你是如何通过 CSS 处理占位符更改和清除图标颜色的？
我试过这个：page-search ion-content form .search-bar .searchbar-input-container .searchbar-clear-icon { color: white;但我注意到清除按钮是一个图像，所以我不知道如何在不改变图像的情况下改变颜色
对不起，我没听懂你，你想在这实现什么？除非您更改图像，否则您无法通过 CSS 更改图像颜色。
我需要更改清除图标的颜色和占位符的颜色。

标签： css angular typescript ionic2

【解决方案1】：

如果您使用 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;
      }

    }

【讨论】：

【解决方案2】：

我意识到它是一个背景图像，我用 ionic 的图标替换了它，在我的案例材料设计中（您可以通过使用图标名称在 ionic css 中搜索来搜索 de content 属性）

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

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

【讨论】：

【解决方案3】：

我找到了一个只有 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);
          }

将占位符颜色更改为白色和 filter invert(100) 将黑色反射为白色（不是最佳解决方案，但您可以这样做而不是更改 img url）

【讨论】：