Change the Placeholder Color of the TextBox

Environment

Product

Progress® Kendo UI for Angular TextBox

Description

How can I change the color of the TextBox placeholder?

Solution

Use the kendo-textbox selector which utilizes the ::placeholder input CSS pseudo-element.

css

        kendo-textbox .k-input-inner::placeholder {
                color: #4287f5;
         }

If the project is configured to use SCSS, then the following variable can be used instead $kendo-input-placeholder-text: blue;.

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...