Question

现在我有一个搜索栏，但我希望它的边界是圆的，我该怎么办？我试过边框：圆形，边界半径：10px ......它没有用。我甚至想更改我的搜索图标颜色并取消图标颜色？关于如何实现这些事情的任何想法

Answer 1

我尝试了以上所有答案，但没有一个对我有用。

经过一番挖掘，我发现某些东西可能对其他想要调整离子搜索栏（或一般其他离子元素）默认样式的人有用

下面是我希望更改其样式的离子搜索栏的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规则的视图封装，换句话说，它使您可以访问组件HTML之外的DOM元素。

Answer 2

更改图标颜色。在你的＆＃34; variables.scss＆＃34;文件在＆＃34;主题＆＃34;文件夹添加此行;

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

要更改搜索栏的边框半径，请转到与包含SEARCH BAR的页面关联的SCSS文件并将其放入

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

Answer 3

以下代码将颜色更改为白色，以替换原始的灰色。

.searchbar .searchbar-search-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");
}

尝试此操作以更改搜索栏图标的颜色。为我工作。如果您尝试检查搜索栏图标，则它具有背景图片属性，看起来像这样

background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%235b5b5b'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>");

只需根据您的颜色更改fill='%235b5b5b'中的最后6个十六进制数字即可。希望这会有所帮助。

Answer 4

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

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

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

离子3搜索栏样式和搜索图标颜色变化

4 个答案: