How to style the SfTextBox Label?

[oliver tejada]

I apologize for the noob question.

Is it possible to style the Float Label of a SfTextBox?

I set my Label to FloatLabelType="@FloatLabelType.Auto"

I just want to set the fontweight to bold. 

[Berly Christopher]

Hi Oliver, 

  

Greetings from Syncfusion support. 

  

We can change the font-weight style for the FloatLabel type TextBox component by overriding the CSS styles with help of CssClass. Kindly refer the below code example. 

  

 

<SfTextBox ID="EmpName"  CssClass="e-custom" Placeholder="Enter your Name" @bind-Value="@val" FloatLabelType="FloatLabelType.Auto"></SfTextBox> 

 

<style> 

    .e-custom .e-control.e-textbox { 

        font-weight:bold; 

    } 

</style> 

@code{ 

    public string val { get; set; } = "Syncfusion"; 

} 

  

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_1642001511802855  

  

Regards, 

Berly B.C 

[oliver tejada]

Thanks for the reply.

I was actually referring to the the LABEL itself to be bolded and not the textbox. Is is possible to customize the LABEL? 

I like the animation of the FloatLabelType="FloatLabelType.Auto".

Thanks in advance.

[Berly Christopher]

Hi Oliver, 

We can change the font-weight for the float label (FloatLabel type Auto) with help of overriding the CSS styles as mentioned below. 

<style> 

    .e-custom.e-float-input input:valid ~ label.e-float-text.e-label-top, 

    .e-custom.e-float-input input ~ label.e-float-text.e-label-top, 

    .e-custom.e-float-input.e-control-wrapper input:valid ~ label.e-float-text, 

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

    .e-custom.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text 

    .e-custom.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-custom.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { 

        font-weight: bold; 

        color: #212529; 

    } 

</style> 

Modified sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDown_App_1642001563895392  

 

Regards, 

Berly B.C 

[oliver tejada]

Awesome! This is what I needed. Thanks Berly. 👍

[oliver tejada]

Hi Berly,

Can you help me edit the style so that it will also work for SfDropDownList? 

I tried changing the style to fontweight:bold; color: dimgrey;  sfTexbox and sfNumericTexbox styling works, but for SfDropDownList it stays bold and color black.

Thanks.

[Berly Christopher]

Hi Oliver, 

We can achieve the requested requirement in the DropDownList component by adding the below mentioned styles in your application. 

<SfDropDownList TValue="string" @bind-Value="dropval" ShowClearButton="true" FloatLabelType="FloatLabelType.Auto" CssClass="e-custom-drop" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 

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

</SfDropDownList> 

 

    /* For DropDownList */ 

    .e-custom-drop.e-float-input.e-control-wrapper input ~ label.e-float-text.e-label-top, 

    .e-custom-drop.e-float-input input ~ label.e-float-text.e-label-top, 

    .e-custom-drop.e-float-input.e-control-wrapper label.e-float-text, 

    .e-custom-drop.e-float-input.e-input-focus input ~ label.e-float-text, 

    .e-custom-drop.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text { 

        font-weight: bold; 

    } 

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

    .e-custom-drop.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text, 

    .e-custom-drop.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text, 

    .e-custom-drop.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: dimgrey; 

    } 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDown_App_164200-1509647926  

 

Regards, 

Berly B.C

[oliver tejada]

Thank you. 🙏

[Berly Christopher]

Hi Oliver, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Tejaswini Reddy Mara]

Hi Berly, 

Can you help me edit the style so that we can change the style of  float label (FloatLabel type Auto)  for disabled textbox ?

[UdhayaKumar Duraisamy]

Hi Tejaswini,

In the disabled TextBox component, we can change the style of FloatLabel (FloatLabel type Auto) by overriding the existing CSS styles. Kindly refer to the below code example.

.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{

        font-style:italic;

    }

Regards,

Udhaya Kumar D

Attachment: FloatLabel_Syle_b8d2585c.zip

[Peter Groft]

Change the read-only property of the textbox to TRUE.

Change the back color of the textbox to transparent.

Change the border of the text box to none.

Greetings,
Peter

[UdhayaKumar Duraisamy]

To make the border and background of the TextBox component transparent, use the CSS structure below.

@using Syncfusion.Blazor.Inputs

 

<SfTextBox Placeholder='First Name' Readonly=true Value="Syncfusion"></SfTextBox>

 

<style>

    .e-input-group .e-input[readonly], .e-input-group.e-control-wrapper .e-input[readonly]{

        background: rgb(0 0 0 / 0%); /*Transparent Background*/

    }

 

    .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {

        border: none; /*Set border to none*/

    }

</style>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TB_Background_Border1537956003