How to show requried field(*) to syncfusion text box

[Suryateja KONDLA]

<style>
    .e-input-group.e-control-wrapper.e-control-container.e-float-input .e-float-text::after {
    content: "*";
    color: red;
    }
</style>

If am using this i am getting  " * "  for all the text boxes, dropdows etc 

i want if for specfic text box dropdowns etc and i am using syncfusion components

<div class="col-md-3">
                <div class="form-group">
<SfTextBox Value="@Value"
           Type="@InputType"
           FloatLabelType="FloatLabelType.Always"
           Autocomplete="AutoComplete.Off"
           CssClass="e-success"
           ShowClearButton="true"
           Placeholder="Placeholder"
           ValidateOnInput="true">
</SfTextBox>
</div>
</div>

[Sureshkumar P]

Hi Suryateja, 

You can achieve your requirement by using CssClass property. By adding specific class, you can apply this placeholder style in specific component. 

 

Find the code example here: 

 

<SfTextBox Value="@Value" 

           Type="InputType.Text" 

           FloatLabelType="FloatLabelType.Always" 

           Autocomplete="AutoComplete.Off" 

           CssClass="e-success customCSS" 

           ShowClearButton="true" 

           Placeholder="Placeholder" 

           ValidateOnInput="true"> 

</SfTextBox> 

 

<SfTextBox Value="@Value" 

           Type="InputType.Text" 

           FloatLabelType="FloatLabelType.Always" 

           Autocomplete="AutoComplete.Off" 

           CssClass="e-success" 

           ShowClearButton="true" 

           Placeholder="Placeholder" 

           ValidateOnInput="true"> 

</SfTextBox> 

 

@code { 

    public string Value { get; set; } 

 } 

 

 <style> 

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

    content: "*"; 

    color: red; 

    } 

</style> 

 

 

 

Find the screen shot: 

 

 

Regards, 

Sureshkumar P