Help changing placeholder color in many components

[jose luis barajas]

Hi, my project is Blazor WASM

I just did some experiments changing color for place holder including text!, 

I can change enterely text color when input text is required (check my image)

but the problem its that only can style textboxes, I need this style in any control, for example

dropdown list, SfDatePicker, etc

I also add a custom style variable for required files  CssClass="required-field"

This works fine with textboxes

  <SfTextBox @bind-Value="@textdata"

             FloatLabelType='@FloatLabelType.Auto'

             CssClass="required-field"

             Placeholder="[Dato requerido]" >

  </SfTextBox>

But does not work with DropdownList's and any other component, for example:

                            <SfDropDownList TItem="ArchCategoriaModel" Width="100%"

                            @bind-Value="@dbcategory1"

                                            TValue="int"

                                            AllowFiltering="true"

                                            Placeholder="[Dato requerido] "

                                            FloatLabelType='@FloatLabelType.Auto'

                                            CssClass="required-field"

                                            DataSource="@datasourceCategoria">

                                <DropDownListFieldSettings Text="DESCRIPCION" Value="ID"></DropDownListFieldSettings>

                            </SfDropDownList>

My style:

<style>

    .e-input-group.e-control-wrapper.e-control-container.e-float-input.required-field .e-float-text {

        color: #8B0000;

    }

        .e-input-group.e-control-wrapper.e-control-container.e-float-input.required-field .e-float-text::after {

            content: "*";

            color: #8B0000;

            margin-left: 5px;

        }

</style>

Please help!

Attachment: image_help_54ccb24e.rar

[Yohapuja Selvakumaran]

Hi jose luis Barajas,

Thank you for reaching out us. We have taken your input into consideration and have crafted a sample that incorporates customized text color for placeholder text. It's important to note that the structure of each component can differ, which means that the required CSS classes for modifying placeholder colors may vary. We have successfully applied this color customization to textboxes, dropdown lists, and datepickers.

Code Snippet:

@using Syncfusion.Blazor.Inputs;

@using Syncfusion.Blazor.DropDowns;

@using Syncfusion.Blazor.Calendars;

 

<h4>TextBox</h4>

 

<SfTextBox FloatLabelType='@FloatLabelType.Auto'

           CssClass="required-field"

           Placeholder="Enter the text">

</SfTextBox>

 

<h4>Dropdownlist</h4>

 

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="Select a game" FloatLabelType='@FloatLabelType.Auto' DataSource="@Games" CssClass="required-field">

    <DropDownListFieldSettings Text="Text" Value="ID"/>

</SfDropDownList>

 

<h4>Datepicker</h4>

 

<SfDatePicker TValue="DateTime?" Placeholder="Select a date" FloatLabelType='@FloatLabelType.Auto' CssClass="required-field"></SfDatePicker>

 

 

@code {

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

     };

 

 

}

 

 

<style>

 

    .e-input-group.e-control-wrapper.e-control-container.e-float-input.required-field .e-float-text {

        color: #8B0000;

    }

 

    .e-ddl.e-lib.e-input-group.e-control-wrapper.e-control-container.e-float-input.e-input-focus.required-field .e-float-text.e-label-top {

        color: #8B0000;

    }

 

    .e-date-wrapper.e-date-container.e-input-group.e-control-container.e-control-wrapper.e-float-input.required-field .e-float-text {

        color: #8B0000;

    }

 

</style>

 

For more detailed instructions and clarifications, we encourage you to consult the documentation provided at the following link.

https://blazor.syncfusion.com/documentation/dropdown-list/placeholder-and-floatlabel#customizing-the-float-label-elements-focusing-color

If you have any further questions or require additional assistance, please do not hesitate to reach out to us.

Regards,

Yohapuja S

Attachment: Placeholder_color_defa17d1.zip

[jose luis barajas]

Hi Yohapuja,

Thanks for your response, 

I just tested your sample code.

Please check my attached image, In my project only textbox controls preserved placeholder in red color.

Other controls (not textbox) are showing placeholder in black, Only shows red colors when control is focused, with lost focus placeholder color are showed in black color.

 In your sample code I added 2 textbox controls without required css property, and only the first textbox is showed with placeholder in red color.

I look forward to your comments.

Thank in advance!

Attachment: info_5dc0ecd3.rar

[Yohapuja Selvakumaran]

Hi jose luis Barajas,

Upon reviewing your query, it appears that you are looking to add color to a placeholder after it loses focus. To help you achieve this, please find below a code snippet and a sample that demonstrate how to implement this functionality effectively.

CodeSnippet

@using Syncfusion.Blazor.Inputs;

@using Syncfusion.Blazor.DropDowns;

@using Syncfusion.Blazor.Calendars;

 

<h4>TextBox 1</h4>

 

<SfTextBox FloatLabelType='@FloatLabelType.Auto'

           CssClass="required-field"

           Placeholder="Enter the text">

</SfTextBox>

 

<h4>TextBox 2</h4>

 

<SfTextBox FloatLabelType='@FloatLabelType.Auto'

           CssClass="required-field"

           Placeholder="Enter the text">

</SfTextBox>

 

 

<h4>Dropdownlist</h4>

 

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="Select a game" FloatLabelType='@FloatLabelType.Auto' DataSource="@Games" CssClass="required-field">

    <DropDownListFieldSettings Text="Text" Value="ID"/>

</SfDropDownList>

 

<h4>Datepicker</h4>

 

<SfDatePicker TValue="DateTime?" Placeholder="Select a date" FloatLabelType='@FloatLabelType.Auto' CssClass="required-field"></SfDatePicker>

 

 

@code {

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

     };

 

 

}

 

 

<style>

    /*To add color to the textbox placeholder after focusing*/

   .e-input-group.e-control-wrapper.e-control-container.e-float-input.required-field .e-float-text {

        color: #8B0000;

    }

 

    /*To add color to the dropdown placeholder after focusing*/

    .e-ddl.e-lib.e-input-group.e-control-wrapper.e-control-container.e-float-input.e-input-focus.required-field .e-float-text {

        color: #8B0000;

    }

 

    /*To add color to the datepicker placeholder after focusing*/

    .e-date-wrapper.e-date-container.e-input-group.e-control-container.e-control-wrapper.e-float-input.required-field .e-float-text {

        color: #8B0000;

    }

 

    /*To add color to the dropdown placeholder after losing focus*/

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

        color: #8B0000;

    }

 

    /*To add color to the textbox and datepicker placeholder after losing focus*/

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

        color: #8B0000;

    }

 

</style>

Regards,

Yohapuja S