更改默认颜色选择器框

Question

我正在将Angular6用于材料设计。我正在尝试从mat-form-field获取颜色输入。为此，我在matinput type="color"标记内使用了input。我的HTML文件如下，

    <div>
      <mat-form-field class="form-field">
          <mat-label>Color</mat-label>
        <input matInput type="color" formControlName="color"required placeholder="Color">
      </mat-form-field>
    </div>

然后我在上面添加了一些CSS以根据需要设计颜色选择器框，

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 25px;
    height: 25px;
    float: right;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

现在我得到的输出是

即使默认情况下包含黑色，表单字段也没有任何默认输入。因此，我要执行的操作是获取默认的颜色框，如下所示。 （为了轻松理解我使用photoshop设计期望的要求），

Answer 1

您必须添加一些样式，并且需要在ts文件代码中进行一些更改才能显示该框

这是一个有效的示例：https://stackblitz.com/edit/angular-tbkqbt