css - 更改默认颜色选择器框

Question

我将 Angular6 与 Material 设计结合使用。我想要做的是从 mat-form-field 获取颜色输入。为此，我在 input 标签中使用了 matinput type="color" 。我的 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