从 ionic 3 中的 ion-searchbar 中删除阴影

Question

我需要去除离子搜索栏的边框。我在 variable.scss 中尝试了以下代码，但没有 luck.I 在 ionic 中很新，所以请详细告诉我。

 .searchbar-input {
      -webkit-box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 1),
        0 3px 1px -2px rgba(255, 255, 255, 1), 0 1px 5px 0 rgba(255, 255, 255, 1);
      box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 1),
        0 3px 1px -2px rgba(255, 255, 255, 1), 0 1px 5px 0 rgba(255, 255, 255, 1);
    }

Answer 1

如果没有你的代码输出很难找到解决方案，你可以试试这个：

.searchbar-input {
    border: 0 !important;
    box-shadow: none !important;
}

Answer 2

如果是 ionic 4，试试这个：

.sc-ion-searchbar-md-h {
  --box-shadow: none !important
}

在使用搜索栏的组件的 SCSS 文件中。

Answer 3

我正在使用 Ionic 3，对我有用的解决方案是将这段代码放在 scss 关联文件中：

  ion-searchbar {
    .searchbar-input-container {
      .searchbar-input {
        box-shadow: none;
      }
    }
  }

从 ionic 3 中的 ion-searchbar 中删除阴影

remove shadow from ion-searchbar in ionic 3

css

searchbar

ionic-framework

ionic3

angular