Multiple Label Colors

[Matias Suarez]

Hello everyone! I need to set 2 diferent colors in a Radio Button label. Is that posible? I'm adding an image of how it should be and another of how it is right now.

This is how it is right now.

This is how it should be

  I'm adding the code too.

                    <SfRadioButton Label="@item.Description"

                                   CssClass="e-success"

                                   Name="options"

                                   Value="@item.Id"

                                   @bind-Checked="stringChecked">

                    </SfRadioButton>

Thanks!

[YuvanShankar Arunagiri]

Hi Matias,

We apologize for the delay in getting back to you. We have taken a look at your reported issue and have prepared a sample based on your specific requirements. Please see the code snippet and sample code file below for reference. You can use the CSS style provided to set the color of the label for the radio button.

<SfRadioButton Label=@item.Label Name="payment" Value=@item.Value CssClass="e-custom-label" Checked="@checkedValue"></SfRadioButton>

………………………………………

 

<style>

    .e-custom-label .e-label {

        background-image: linear-gradient(to left, red, green, green, green, green, green, green);

        -webkit-background-clip: text;

        -moz-background-clip: text;

        color: transparent !important;

    }

</style>

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: FetchData_b4b3203.zip

[Matias Suarez]

It didn't work as expected. What I need is to change the color of specific words in the label.

[YuvanShankar Arunagiri]

Matias,

We have prepared the sample based on your requirement. Using the JavaScript invoke method, we can customize the label of radio button. Please refer to the below code snippet and attached sample.

[Index.razor]:

<div class="radio-control">

    @foreach (var item in Data) {

        <div class="row">

            <SfRadioButton Label=@item.Label Name="payment" Value=@item.Value Created="OnCreated" Checked="@checkedValue"></SfRadioButton>

        </div>

    }

</div>

…..

 

private async Task OnCreated()

    {

        if (!IsCreated)

        {

            IsCreated = true;

            await JSRuntime.InvokeAsync<string>("CustomLabel");

        }

    }

…..

<style>

    .e-radio-wrapper {

        margin-bottom: 10px !important;

    }

    .radio-control span:nth-child(2) {

        margin-left: 20px !important;

    }

    .e-radio-wrapper span {

        margin-left: 5px;

    }

    .e-radio-wrapper span.e-custom-color {

        color: red !important;

    }

</style>

 

[_Layout.cshtml]:

<script>

        function CustomLabel() {

            var elem = document.getElementsByClassName("e-radio-wrapper");

            for (var i = 0; i < elem.length; i++) {

                var e = elem[i].getElementsByClassName("e-label")[0];

                var label = e.textContent.split(" ");

                e.style.display = "none";

                for (var j = 0; j < label.length; j++) {

                    var span = document.createElement("span");

                    span.textContent = label[j];

                    elem[i].children[1].appendChild(span);

                    if ((/\d/).test(label[j]) || label[j] === "Dia") {

                        span.classList.add('e-custom-color');

                    }

                }

            }

        }

    </script>

Using above highlighted code, we can change the color of specific word in label of radio button.

Output screenshot:

Attachment: RadioButtonSample_c7968153.zip

[Matias Suarez]

that worked excellent! thank you very much!

[YuvanShankar Arunagiri]

You are welcome, Matias. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any other assistance.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.