当元素处于焦点状态时，如何向 ion-searchbar 添加样式？离子8

Question

在 ionic 8 中，我使用以下代码设置了搜索栏的样式：

// Toolbar Styles
ion-searchbar.monkey-searchbar {
  --background: transparent;
  --box-shadow: none;
  padding: 0;

  // Placeholder
  --placeholder-color: var(--gray);

  // Input Text
  --color: var(--lines-and-text);

  // Search Icon
  --icon-color: var(--gray);

  // Clear Button
  --clear-button-color: var(--dark-gray);


  // Underline
  border-bottom: 1px var(--gray) solid;


  &:focus-within {
    border-bottom: 1px var(--text-and-lines) solid;
    --clear-button-color: var(--text-and-lines);

    ion-icon {
      display: none;
    }

    // .searchbar-search-icon {  // This is the specific class for the search icon
    //   display: none;
    // }

    // &::part(search-icon) {
    //   display: none;
    // }

    // .searchbar-input-container ion-icon {
    //   display: none;
    // }

  }


  ion-icon {
    // display: none;

    right: 10px !important;
    left: auto !important;
  }
}

我已经注释掉了不起作用的东西。注意：

ion-icon { display: none; }

工作正常。那里的定位逻辑也是如此。但是，我不知道如何仅在 focus-within 为 true 时应用

display: none;

样式？！我尝试了一系列更绝望的事情 - 在我的代码 FWIW 中，我实际上不会对其中任何一个感到满意。

我想做的是将输入文本一直推到左边；将搜索图标推到右侧（这已经有效），并在输入文本时使其消失，因此仅存在清晰的图标。

我想使用在 ionic 9 出现时不会爆炸的代码来完成此操作，即已记录的内容，并且由于依赖于 ionic 8 实现的特定内部结构而不会被破坏。

我现在可能会选择这个 - 但由于离子限制，我不得不不断妥协我的设计决策：

ion-searchbar.monkey-searchbar {
  --background: transparent;
  --box-shadow: none;
  padding: 0;

  // Placeholder
  --placeholder-color: var(--gray);

  // Input Text - font correct by default
  --color: var(--lines-and-text);

  // Search Icon
  --icon-color: var(--gray);

  // Clear Button
  --clear-button-color: var(--gray);

  // Underline
  border-bottom: 1px var(--gray) solid;

  &:focus-within {
    border-bottom: 1px var(--text-and-lines) solid;
    --icon-color: var(--dark-gray);
    --clear-button-color: var(--dark-gray);
  }
}

Answer 1

如果您将 Angular 与 Ionic 结合使用，则可以使用以下 CSS 来设置搜索栏的样式。如果您在 Ionic 中使用另一种语言，只需删除

::ng-deep

。

<ion-searchbar mode="ios" placeholder="Search here..." class="searchbar-border" clearIcon="close-outline" />

::ng-deep {
  .searchbar-has-focus {
    .searchbar-input {
      caret-color: var(--ion-color-primary) !important;
      border: 1px solid var(--ion-color-primary) !important;
    }
  }

  .searchbar-input {
    padding-inline-start: 2.75rem !important;
  }

  ion-icon.searchbar-search-icon {
    margin-inline-start: 10px !important;
  }

  button.searchbar-clear-button {
    inset-inline-end: 10px !important;
  }
}

.searchbar-border {
  padding: 0px;
  min-height: unset;
  --border-radius: 50px;
  --background: var(--Neutral-07);
}