html - formgroup 标签以大写形式显示，但我希望它是 titlecase

Question

我有以下角度模板。我注意到，即使在呈现页面时标签是大写的，标签也会转换为大写，我不喜欢它。所以我决定使用 titlecase 管道并用单引号将标签文本括起来。但是，标签仍然是大写的（附上图片以供参考）

我想这应该是直截了当的，但我不知道如何使它工作。有任何想法吗？

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label for="total">
          {{'Total' | titlecase}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label for="supporters">
          {{'Number of supporters' | titlecase}}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

标签： htmlcssangularlabel

Answer 1

这似乎是您的 CSS 的问题。

可能，您正在使用<label>为其设置属性的库或 css 文件text-transform: uppercase;。

您可以尝试使用自定义 css 规则覆盖它，例如：

HTML

<form [formGroup]="updateForm" (ngSubmit)="onSubmit(updateForm.value)">
    <div>
        <label class="custom-label-title" for="total">
          {{'Total'}}
        </label>
        <input id="total" type="text" formControlName="total">
      </div>

      <div>
        <label  class="custom-label-title" for="supporters">
          {{'Number of supporters' }}
        </label>
        <input id="supporters" type="text" formControlName="supporters">
      </div>      
    <button class="button" type="submit">Save</button>

  </form>

CSS

.custom-label-title {
  text-transform: capitalize;
}

以防万一它不起作用（仅用于测试目的）添加!important：

CSS

.custom-label-title {
  text-transform: capitalize !important;
}

因为其他 CSS 规则可能具有更大的优先级：

CSS的优先顺序是什么？