ionic 3搜索栏样式和搜索图标颜色更改

Question

现在我有一个搜索栏，但我希望它的边框是圆形的，我该怎么办？我已经尝试了边界:圆形，边界半径:10px...但它并没有起作用。我甚至想要更改我的搜索图标颜色和取消图标颜色？你对如何实现这些目标有什么想法吗？

Answer 1

对于改变图标颜色的Ionic 4，这对我来说很好

ion-searchbar {
 --icon-color: var(--ion-color-primary); 
}

对于未来的参考，您可以查看官方文档https://ionicframework.com/docs/api/searchbar

Answer 2

我尝试了上面所有的答案，但没有一个对我有效。

经过一番挖掘，我发现了一些对其他人可能有用的东西，这些人想要调整ion-searchbar的默认样式(或者一般的其他ion元素)

下面是我想要更改样式的离子搜索栏的component.scss代码：

ion-searchbar{
    --icon-color: var (--ion-color-primary);
    --box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    ::ng-deep{
        .searchbar-input-container{            
            .searchbar-input{ 
                border-radius: 20px;
                //any style that you want to implement on your searchbar
            }
        }
    }   
}

在这里，::ng-deep禁用特定CSS规则的视图封装，换句话说，它允许您访问DOM元素，这些元素不在组件的HTML中。

Answer 3

要更改图标颜色，请执行以下操作。在你的"variables.scss“文件中的"theme”文件夹中，添加下面这行；

$searchbar-md-input-search-icon-color:#yourColor;

要更改搜索栏的边框半径，请转到与包含搜索栏的页面相关联的SCSS文件，并将此

 ion-searchbar{        
    .searchbar-input-container{            
        .searchbar-input{
            border-radius: 20px;
        }
    }
 }