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 the deafult color of e-float-line

I am using SfTextBox on a Blazor server-side project  with the material theme. The control is placed on a page with a dark background image. I have managed to make the color of the e-float-line to be a lighter color when the control is selected using the css below, however I would like to understand how to change the default/unselected color for the float line. Is this possible?

.e-custom.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
    .e-custom.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
    .e-custom.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
    .e-custom.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after {
        background: yellow;

2 Replies 1 reply marked as answer

SP Sureshkumar P Syncfusion Team December 6, 2022 11:34 AM UTC

Hi Simon,

When you use our Syncfusion components inside the dark background then you can use the material-dark theme instead of the material theme to achieve your requirement.

Find the code here:

  <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material-dark.css" rel="stylesheet" />

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Find the sample in the attachment:


Sureshkumar P

Attachment: Textbox_e4be0082.zip

Marked as answer

SI Simon December 12, 2022 04:28 AM UTC

Thanks, that really helped

Live Chat Icon For mobile
Up arrow icon