取消离子搜索栏中的框阴影

Question

我想隐藏具有元素ion-searchbar的原始盒形阴影，但无法隐藏或删除它。我尝试了下一件事情：

html：

<ion-searchbar placeholder = "Buscar" class = "nav_searchbar" spellcheck = "true" 
      animated = "true" autocomplete = "true" autocorrect = "true" [(ngModel)] = "busqueda" (input) = "setFilterData($event)"
      class = "hiddenBtnContainer">

        <ion-button class = "hiddenBtn" size = "small" (click) = "makeADeeperSearch()" focusable></ion-button>

</ion-searchbar>

css：

.nav_searchbar{
    border-bottom: 1px solid #fff !important;
    width: 80%;
    box-shadow: none;
    --box-shadow: none;
    -webkit-box-shadow: none;
}

.searchbar-input.sc-ion-searchbar-md{

    box-shadow: none;
    --box-shadow: none;
    -webkit-box-shadow: none;

}

但是使用这些样式，ion-searchbar元素仍然具有框阴影...有点烦人。

ion-searchbar并应用了样式：

如您所见，搜索栏上有一个小方框阴影。

Devtools屏幕截图：

重要提示：请注意，带有searchbar-input sc-ion-searchbar-md类以及该div以下所有元素的div元素（ion-icon和button）是由ionic自动生成的（因为搜索栏上有搜索按钮及其相应的图标）。

另一个重要的事情是，我已经测试禁用了在devtools上选择的特定元素的框阴影并起作用，所以这是问题所在，但是我仍然无法禁用具有css属性的框阴影。已经放了（仅当我直接在devtools中禁用它们时才有效），就像我放的这些CSS属性会被忽略。

Answer 1

您在class上有2个<ion-searchbar>属性：

<ion-searchbar placeholder = "Buscar" class = "nav_searchbar" ... class = "hiddenBtnContainer">

因此第一个可能会被忽略。尝试正确使用class属性：

<ion-searchbar placeholder="Buscar" class="nav_searchbar hiddenBtnContainer" spellcheck="true" animated="true" autocomplete="true" autocorrect="true" [(ngModel)]="busqueda" (input)="setFilterData($event)">...