placeholder color in many components

[jose luis barajas]

Hi

I need your help

In your documentation has 

https://blazor.syncfusion.com/documentation/textbox/style-appearance

for Customizing the Textbox placeholder

/* To specify font size and color */

.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {

        color: #343a40;

        font-size: 15px;

}

Questions:

1) I need apply this custom css only for required fields, not for all.

2) How can create this custom css for other components like dates, combobox, etc

Please help!

[Sureshkumar P]

Hi jose, 

 

We suggest you refer the below documentation to achieve your requirement. By using the same behavior, we can also achieve this to other components.   

 

Documentation: https://blazor.syncfusion.com/documentation/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value  

 

Regards, 

Sureshkumar P 

[jose luis barajas]

Hi  Sureshkumar 

This solution works only if control receive focus event. 

I need to show the user as soon as the page is displayed wich controls (textbox, date, etc)

Can you help me, please!

[Sureshkumar P]

Hi jose, 

 

We have created the sample based on your requirement with custom style. Please find the style changes here:  

<EditForm Model="@model"> 

    <DataAnnotationsValidator /> 

    <SfTextBox @bind-Value="@model.TextName" Placeholder="enter name" FloatLabelType="FloatLabelType.Auto"></SfTextBox> 

 

    <SfDatePicker TValue="DateTime?" @bind-Value="@model.DateName" Placeholder="selectDate" FloatLabelType="FloatLabelType.Auto"></SfDatePicker> 

 

    <SfDropDownList TValue="string" CssClass="form-control-sm" Placeholder="e.g. Australia" FloatLabelType="FloatLabelType.Auto" TItem="Countries" @bind-Value="@model.Name" DataSource="@Country"> 

        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 

    </SfDropDownList> 

    <ValidationMessage For="() => model.Name" /> 

    <SfButton CssClass="e-small e-info" Content="Submit"></SfButton> 

</EditForm> 

 

@code { 

    public class CountriesModel 

    { 

        [Required] 

        public string TextName { get; set; } 

        [Required] 

        public DateTime? DateName { get; set; } 

        [Required] 

        public string Name { get; set; } 

    } 

    public CountriesModel model = new CountriesModel(); 

 

    public class Countries 

    { 

        public string Name { get; set; } 

 

        public string Code { get; set; } 

    } 

 

    List<Countries> Country = new List<Countries> 

{ 

        new Countries() { Name = "Australia", Code = "AU" }, 

        new Countries() { Name = "Bermuda", Code = "BM" }, 

        new Countries() { Name = "Canada", Code = "CA" }, 

        new Countries() { Name = "Cameroon", Code = "CM" }, 

    }; 

 } 

 

 <style> 

     .e-float-input.e-error label.e-float-text, 

     .e-float-input.e-control-wrapper.e-error label.e-float-text, 

     .e-float-input.e-error input:focus ~ label.e-float-text, 

     .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, 

     .e-float-input.e-error.e-input-focus input ~ label.e-float-text, 

     .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text, 

     .e-float-input.e-error textarea:focus ~ label.e-float-text, 

     .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text { 

         color: #cced15; 

     } 

 </style> 

 

Find the screen shot here: 

 

 

Find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker797541597  

 

Regards, 

Sureshkumar P