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

Multiple Label Colors

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!


5 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team January 4, 2023 10:03 AM UTC

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


MS Matias Suarez January 4, 2023 10:31 PM UTC

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



YA YuvanShankar Arunagiri Syncfusion Team January 6, 2023 10:28 AM UTC

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

Marked as answer

MS Matias Suarez January 6, 2023 08:30 PM UTC

that worked excellent! thank you very much!



YA YuvanShankar Arunagiri Syncfusion Team January 9, 2023 04:22 AM UTC

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.


Loader.
Up arrow icon