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

【问题标题】：remove shadow from ion-searchbar in ionic 3从 ionic 3 中的 ion-searchbar 中删除阴影
【发布时间】：2018-12-04 07:44:12
【问题描述】：

我需要从 ion-search bar 中删除边框。我在 variable.scss 中尝试了以下代码，但没有运气。我在 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);
    }

【问题讨论】：

你为什么要设置一个css属性？您是说要删除边框和/或阴影，对吗？你为什么不使用 box-shadow: none;边框：如果您想删除它们，则没有？
我也试过了，但它不起作用，所以我认为通过放置一个白色阴影它可能会起作用，但它也不起作用
如果没有确切地看到搜索栏，很难弄清楚。你指的是这个？ ionicframework.com/docs/api/components/searchbar/Searchbar
是的，这就是我正在使用的
你能发布你浏览器的输出吗？

标签： css angular ionic-framework ionic3 searchbar

【解决方案1】：

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

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

【讨论】：

谢谢，它现在工作了！重要的是我正在寻找的
@HemantRajpoot：很高兴我能提供帮助，如果它解决了您的问题，请不要忘记将回复标记为答案。谢谢
我试过这个解决方案，它不适用于ionic4，你能帮忙吗？
对于 ionic 4（我想是用于 md - material design - android）：尝试：.sc-ion-searchbar-md {box-shadow: none !important} 将其放在您的 scss 文件中 scss 定义中的搜索栏组件。请让我知道它是否可以更新答案

【解决方案2】：

如果是离子4，试试这个：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：