Change the Floating Label Color of the Blazor TextBox Component

7 Oct 20212 minutes to read

The floating label color of the TextBox can be changed for both success and warning validation states by applying the following CSS styles.

@using Syncfusion.Blazor.Inputs

    <div class="e-float-input @(TextClass) e-success">
        <input type="text" @onfocus="@Focus" @onblur="@Blur" required />
        <span class="e-float-line"></span>
        <label class="e-float-text">Success</label>
    </div>
    <div class="e-float-input @(FloatTextClass) e-warning">
        <input type="text" @onfocus="@FlaotFocus" @onblur="@FloatBlur" required />
        <span class="e-float-line"></span>
        <label class="e-float-text">Warning</label>
    </div>

@code {
    public string FocusClass { get; set; } = " e-input-focus";
    public string TextClass { get; set; } = "e-input-group";
    public string FloatTextClass { get; set; } = "e-input-group";
    public void Focus(FocusEventArgs args)
    {
        this.TextClass = this.TextClass + FocusClass;
        StateHasChanged();
    }

    public void FlaotFocus(FocusEventArgs args)
    {
        this.FloatTextClass = this.FloatTextClass + FocusClass;
        StateHasChanged();
    }

    public void Blur(FocusEventArgs args)
    {
        if (this.TextClass.Contains(FocusClass))
        {
            this.TextClass = this.TextClass.Replace(FocusClass, "");
        }
        StateHasChanged();
    }

    public void FloatBlur(FocusEventArgs args)
    {
        if (this.FloatTextClass.Contains(FocusClass))
        {
            this.FloatTextClass = this.FloatTextClass.Replace(FocusClass, "");
        }
        StateHasChanged();
    }
}

<style>
    .e-float-input.e-success label.e-float-text,
    .e-float-input.e-success input:focus ~ label.e-float-text,
    .e-float-input.e-success input:valid ~ label.e-float-text {
        color: #22b24b;
    }

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
    .e-float-input.e-warning input:valid ~ label.e-float-text {
        color: #ffca1c;
    }
</style>