Question

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

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

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

Answer 1

我意识到这是一个背景图像，在我的情况下，我将其替换为离子图标（在材料设计中，可以使用图标名称在离子css中搜索de content属性）

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

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

Answer 2

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

    }

Answer 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);
          }

将占位符颜色更改为白色过滤器反转（100）反映黑色到白色（不是最佳解决方案，但不是改变你可以做到的img url）

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

3 个答案: