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

Posted 2023-03-13

【中文标题】不在全局范围内更改离子搜索栏的占位符和清除图标颜色？

【英文标题】：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 更改图像颜色。

我需要更改清除图标的颜色和占位符的颜色。

【参考方案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）