C# MVC Jquery radio buttons

Question

I want to remove the radio button circle and just keep the color. I have no idea how to modify the radio button to achieve this. As far I understand it should be modified in radioHtml, but I am not sure. I have seen in done on other websites, so I guess this is possible.

I have this code:

@using MVCProductDisplay.ViewModels;
@model ShowItemVM

<div class="row">
    <div class="col-md-6 col-12">
        <div id="carouselExampleControls" class="carousel slide">
        <div class="carousel-inner">
    @foreach (var image in Model.ImageBases)
    {
        <div class="carousel-item @(image == Model.ImageBases[0] ? "active" : "")">
            <img class="d-block w-100" src="@image.StaticPath" alt="Failed To Load">
        </div>
    }
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    </div>
    <div class="col-md-6 col-12">
        <h2>@Model.BaseProductName</h2>

        <p>@Model.BaseProductDescription</p>

        <h3>Select Size:</h3>
        <select id="sizeDropdown">
    @foreach (var size in Model.AvailableSizes)
    {
        <option value="@size.Id">@size.Name</option>
    }
        </select>

        <h3>Select Color:</h3>
        <div id="colorRadios">
    <!-- The radio buttons will be populated dynamically using JavaScript -->
        </div>

        <div id="addToCartForm">
        <h3>Add to Cart</h3>
            <form action="/ShoppingCart/Add" method="post">
                <input id="selectedVariantId" name="variantId" />
                <label for="quantityInput">Quantity:</label>
                <input type="number" id="quantityInput" name="quantity" value="1" />
                <button type="submit">Add to Cart</button>
            </form>
        </div>
    </div>
</div>



@section scripts {
    <script type="text/javascript">
      
        $(document).ready(function () {
        

            var baseProductId = @Model.BaseProductId;
            var selectedSizeId = $("#sizeDropdown").val();
            fetchAvailableColors(baseProductId, selectedSizeId);

            
        });
        // Event listener for the size dropdown change
        $('#sizeDropdown').change(function () {
            var baseProductId = @Model.BaseProductId;
            var selectedSizeId = $(this).val();

            fetchAvailableColors(baseProductId, selectedSizeId)

        });


            function fetchAvailableColors(baseProductId, selectedSizeId) 
            {
                $.get('/ProductVariant/GetAvailableColors', { baseProductId: baseProductId, selectedSizeId: selectedSizeId })
                    .done(function (data) {
                console.log(data);
                // Clear the previous options
                $('#colorRadios').empty();
                
                 //populate the color radio buttons with the retrieved data
                $.each(data, function (index,color) 
                {
                    var radioid = 'colorradio' + color.id;
                    var radiohtml = '<input type="radio" id="' + radioid + '" name="colorradio" value="' + color.id + '" onchange="selectProductVariant(' + baseProductId + ', ' + selectedSizeId + ', ' + color.id + ')">';
                    radiohtml += '<label for="' + radioid + '"><span style="background-color:' + color.colorCode + '"></span></label>';
                    $('#colorRadios').append(radiohtml);
                });

                // show the color radio buttons
                $('#colorRadios').show();
                $('#colorRadios input[type="radio"]:first').prop('checked', true);
                var selectedProductColorId = $('#colorRadios input[type="radio"]:checked').val();
                selectProductVariant(baseProductId, selectedSizeId, selectedProductColorId);
            })
            .fail(function (xhr, textStatus, errorThrown) {
                console.log('Error: ' + errorThrown);
            });
            }
        function selectProductVariant(baseProductId, selectedSizeId, selectedProductColor)
        {
            $.get('/ProductVariant/GetProductVariantJQuery', {baseProductId: baseProductId,
            selectedSizeId : selectedSizeId, selectedProductColor: selectedProductColor})
            .done(function(data)
            {
                $('#selectedVariantId').val(data);
            })
            .fail(function (xhr, textStatus, errorThrown) {
            console.log('Error: ' + errorThrown);
            });

        }
        
    </script>
}

The function which needs to be modified is fetchAvailableColors. How could I achieve this? Thanks in advance