CODEWITHSUNDEEP
cssangularuser-interfaceangular-materialcolor-picker
INDRAJITH EKANAYAKE
INDRAJITH EKANAYAKE

Reputation: 4274

Change the default color picker box

I'm using Angular6 with material-designs. What I'm trying to do is get color input from mat-form-field. For that I used matinput type="color" inside my input tag. My HTML file is as follows,

    <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>

Then I have added some CSS on it to design the color picker box according to my need,

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;
}

Now the output what I'm getting is, enter image description here

Even though this contains black color in default, the form field didn't get any default input. So what I want to do is get the default color box as follows. (To easily understand the requirement I have designed my expectation using photoshop), enter image description here

Upvotes: 1

Views: 4099

Answers (1)

Divya Patel
Divya Patel

Reputation: 136

You have to add some styles and need some changes in ts file code to display that box

Here is a working example: https://stackblitz.com/edit/angular-tbkqbt

Upvotes: 1

Related Questions