Customizing the color of the placeholder text not working

[Sven Boris Bornemann]

Hi,

according to your documentation ( https://blazor.syncfusion.com/documentation/textbox/style-appearance#customizing-the-textbox-placeholder)

I'm not able to change the style of the placeholder for a textbox and a numeric textbox. But of a combox it works!

Can you please help?
We use currently version 19.4.0.50 and bootstrap 5

Thank you and best regards.

Sven

[Sureshkumar P]

The CSS style changes updated to the placeholder text are in the top position only. If you need to change the placeholder text color when placed inside the textbox component. Then please refer to the below CSS style changes to achieve your requirement.

Find the code example:

<SfTextBox @bind-Value=@EditValue FloatLabelType="FloatLabelType.Auto" Placeholder="testingPlaceholder"></SfTextBox>

 

 

<style>

    /* To specify font size and color floatLabel as top */

    .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: red;

    }

 

    /* To specify font size and color floatLabel as bottom */

    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: red;

    }

</style>

 

[Sven Boris Bornemann]

Alright thank you. It looks good.

What I need to do for a numeric textbox?

Code

@page "/development/TextBoxTests"
<h3>TextBoxTests</h3>
<style>
/* To specify font size and color */
/*textbox*/

    /* To specify font size and color floatLabel as top */
    .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: red;
    }

 

    /* To specify font size and color floatLabel as bottom */
    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: red;
    }


/*combobox*/
.e-ddl.e-input-group input.e-input::placeholder {
    color: red;
}     
</style>

<SfTextBox Value="@Name"  FloatLabelType="FloatLabelType.Auto" Placeholder="this is empty!!!!"></SfTextBox>
<SfNumericTextBox TValue="int?" Value="@IntVal" Placeholder="this is empty!!!!" ShowSpinButton="false"></SfNumericTextBox>
<SfComboBox Placeholder="this is empty!!!!" @bind-Value="@ComboVal" DataSource="@Countries">
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</SfComboBox>

@code {

    public int? IntVal { get; set; }
    public string Name { get; set; }

    public string ComboVal = null;

    public class Country
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Country> Countries = new List<Country>
    {
        new Country() {Name = "Australia", Code = "AU"},
        new Country() {Name = "Bermuda", Code = "BM"},
        new Country() {Name = "Canada", Code = "CA"},
        new Country() {Name = "Cameroon", Code = "CM"},
    };

}



Thank you and best regards

[Sven Boris Bornemann]

Hi again,

your solution only works with FloatLabelType="FloatLabelType.Auto" ! But I do not use it, can you provide an example for the SfTextBox and SfNumericTextBox without the FloatLabelType please.

Thnak you

[Sureshkumar P]

As per your requirement, you can achieve your requirement by referring to the below CSS styles.

Find the code example here:

<SfTextBox ID="textbox" @bind-Value=@EditValue Placeholder="testingPlaceholder"></SfTextBox>

 

<SfNumericTextBox TValue="int?" Placeholder="numericvalue"></SfNumericTextBox>

 

 

<style>  

 

    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

        color: red !important;

        opacity: 1; /* Firefox */

    }

 

    :-ms-input-placeholder { /* Internet Explorer 10-11 */

        color: red !important;

    }

 

    ::-ms-input-placeholder { /* Microsoft Edge */

        color: red !important;

    }

</style>

 

@code {

    public string EditValue { get; set; }

}