I am utilizing Angular6 with material-designs. My aim is to obtain color input from mat-form-field. I achieved this by using matinput type="color" within my input tag. Below is a snippet of my HTML file,
<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>In order to customize the color picker box, I applied some CSS styling as shown below,
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;
}Currently, the output I am receiving looks like this: https://i.sstatic.net/dSJuB.png
Despite the default black color, the form field does not display any default input. My goal is to have the default color box appear like this (I created an illustration using photoshop for clarity), https://i.sstatic.net/1mWPX.png