We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change FontSize and FontWeight for DropDownList float label ?

I am using the code below, that I found on this link here and it works OK for the following controls:
SfTextBox, SfNumericTextBox and SfComboBox.

 Is it possible to include the SfDropDownList and also for the SfTextBox Disabled and the SfDropDownList Disabled too ?

.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-size: 11px;
font-weight: bold;


2 Replies 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team December 14, 2022 04:29 PM UTC

Hi Ben Junior,

You can add the below code to change the FloatLabel styles by using the CssClass property of the SfDropDownList, disabled SfDropDownList, and SfTextBox components.



    .e-custom.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,

    .e-custom.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),

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

    .e-custom.e-float-input.e-input-group.e-ddl.e-control-wrapper input[disabled].e-dropdownlist ~ label.e-float-text









Marked as answer

BJ Ben Junior December 14, 2022 09:12 PM UTC

Thanks. All works good now. 

Live Chat Icon For mobile
Up arrow icon