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

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 设计的期望的要求），

标签： cssangularuser-interfaceangular-materialcolor-picker

Answer 1

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

这是一个工作示例：https ://stackblitz.com/edit/angular-tbkqbt