Question

我有一个Ionic 3应用程序，我正在处理搜索字段。我正试着用深色背景和白色文字给它上色。

我有以下代码，它在后台工作正常，但默认图标和占位符文本没有变白：

  .searchbar {
    background-color:#2f303e; 
    color:#fff;
      .searchbar-input {
        background-color:#2f303e; 
        color:#fff;
      }
  }

以下是组件：

  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

我错过了什么？

Answer 1

查看文档： https://ionicframework.com/docs/api/components/searchbar/Searchbar/ 在Sass变量部分你有$ searchbar-ios-input-search-icon-color以及你需要在theme / variables.scss中声明它们的更多变量只需添加它们即可。

快乐编码.. :)

Answer 2

使用的默认搜索图标是svg（用作背景图像）。使用color: #fff;

无法更改其颜色

而是使用图标颜色：

可用的sass变量

ios: $searchbar-ios-input-search-icon-svg

android: $searchbar-md-input-search-icon-color

占位符颜色：

ios: $searchbar-md-input-placeholder-color

android: $searchbar-ios-input-placeholder-color

无法自定义默认搜索组件的颜色

2 个答案: