离子搜索栏高度和占位符的问题

Question

希望你一切都好

我在使用 Ionic 5 - Angular 和搜索栏时遇到问题。

我像这样添加了 搜索栏 :

<ion-searchbar
          [(ngModel)]="text"
          (ionChange)="search()"
          placeholder="Search for cars"
          class="searchbarInput"
        ></ion-searchbar>

我正在尝试将搜索栏的高度更改为 48px 并将占位符文本更改为 10px，但没有成功。

我还尝试在检查的元素中自定义 class，例如 search-input 和 search-input-container，但没有成功。

当我在 Inspect Elements 中自定义 css 并添加样式时，它可以工作，但在我的 css 中它不起作用。

如果有人能帮我解决这个问题，我将不胜感激。

非常感谢您的宝贵时间。

Answer 1

<ion-searchbar> 似乎是这样工作的：<div><ion-input></ion-input></div>，因此高度属性会影响 div 元素。您可以尝试 height:fit-content 或 max-content。

离子搜索栏高度和占位符的问题

Problem with ion-searchbar height and placeholder

css

searchbar

ionic-framework

angular