CODEWITHSUNDEEP
htmlcssangularsassangular-material
Bijay
Bijay

Reputation: 43

How to add css to input field placeholder of angular material whose appearance is set to outline and has a label?

I want to trim the material input placeholder message with ellipses but the css gets applied to the label instead.

I am able to apply the css successfully to the material input when mat-form-field appearance is set to standard and we don't have a label. But when it's set to outline, the css gets applied to label.

I have the following html and css code:

 .myFormField {
            display: block;
            width: 100%;

            .mat-form-field-infix {
                .mat-input-element {

                    &:placeholder-shown,
                    &::placeholder {
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }
 <mat-form-field appearance="outline" class="myFormField">
     <mat-label> Business Name lorem</mat-label>
     <input matInput formControlName="name"
            placeholder="Business Name lorem ipsumejshdskhdsahdkasdk hasdaskdahdkjhas" required>
</mat-form-field>

Upvotes: 0

Views: 1043

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3140

Chrome always shows the full placeholder when the input is in focus which is why the ellipsis will not be displayed. you can check this answer for more information, firefox does support placeholder ellipsis on focus

Upvotes: 1

Related Questions