Question

我需要从离子搜索栏上除去边框。我在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);
    }

Answer 1

在没有代码输出的情况下很难找到解决方案，您可以尝试以下方法：

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

Answer 2

如果是离子4，请尝试以下操作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <select2 :options="options" v-model="selected"></select2>
    <div>
    Selected: {{selected}}
    </div>
    <button type="button" @click="modifyOptions">Modify Options</button>
  </div>
</div>

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

Answer 3

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

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

从ionic 3的ion-searchbar去除阴影

3 个答案: