如何更改<input type="color">的默认颜色？

Question

我正在使用 Angular，想要更改

<input type="color">

元素的默认颜色。目前，它默认显示黑色（#000），但我想将其设置为不同的颜色。我怎样才能实现这个目标？

还有， 我正在使用 Angular v18。 我尝试过设置 value 属性，但不起作用。

我的代码片段：

<input type="color" name="color" value="#ff0000" ngModel />

Answer 1

<input type="color" name="color" [(ngModel)]="selectedColor" value="#ff0000" />

export class AppComponent {
  selectedColor: string = '#ff0000';  // default color red
}

Answer 2

您应该使用

[value]

或

[(ngModel)]

，但不能同时使用两者，否则会导致错误。

    <input type="color" name="color" [(ngModel)]="model"/>
    <input type="color" name="color" [value]="model"/>

完整代码：

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input type="color" name="color" [(ngModel)]="model"/>
    <input type="color" name="color" [value]="model"/>
  `,
})
export class App {
  model = '#ff0000';
}

bootstrapApplication(App);

Stackblitz 演示