Change default color of placeholder being used as label
Greetings!!
We have a set of Datetimepickers and want to change the default color of the placeholder text being used as the label with floatLabelType="Always". I am attempting to modify the label.e-float-text css property but that does not appear to change the color:
How can we properly access the css to adjust the default color while leaving the selection and validation colors intact??
Thank you,
-Daniel
Hi Daniel Jennings,
Thank you for reaching out to us.
To customize the color of the floating label in the ejs-datetimepicker, you can achieve this by using the cssClass property and applying custom styles to the class. Below is an example demonstrating how you can modify the color of the floating label:
app.component.html
<ejs-datetimepicker cssClass="e-custom" placeholder="Enter date" floatLabelType="Always"></ejs-datetimepicker> |
app.component.css
.e-custom.e-float-input.e-control-wrapper:not(.e-error) input:valid~label.e-float-text, .e-custom.e-float-input.e-control-wrapper:not(.e-error) input~label.e-label-top.e-float-text { color: darkblue } |
Sample: U8xxbbd1 (forked) - StackBlitz
API Reference: https://ej2.syncfusion.com/angular/documentation/api/datetimepicker/#cssclass
Regards,
Priyanka K
