ASP.NET CORE select helper how to change select option font size?

Question

How do you change the font size of the select options with the ASP.NET CORE select helper?

This code works fine except the long text gets truncated in the browser select. How can I make the option with the long text a smaller font size? (Can I control the option style with the select helper tag?)

{Versions: netcoreapp3.1, Microsoft.EntityFrameworkCore 3.1.5, Microsoft.VisualStudio.Web.CodeGeneration.Design 3.1.3, VS Enterprise 2019 16.6.3}

View:

<div class="form-group">
   <label asp-for="LongOptionText" class="control-label"></label>
   <select asp-for="LongOptionText" class="form-control" asp-items="@ViewBag.LongOptionText">
   </select>
  <span asp-validation-for="LongOptionText" class="text-danger"></span>
</div>

Controller:

LongOptionTextList(DBObject.LongOptionText);

Controller Function:

private void LongOptionTextList(int? selectedLongOptionText)
{
    List<SelectListItem> LongOptionText = new List<SelectListItem>();
    if (selectedLongOptionText == null || selectedLongOptionText == 0)
    {
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Select a Long Text" });
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Long Text {Default}", Selected = true });
    }
    else
    {
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Select a Long Text" });
        LongOptionText.Add(new SelectListItem { Value = "0", Text = "Long Text {Default}" });
    }

    LongOptionText.Add(new SelectListItem { Value = "1", Text = "Very Long Text that needs to be made small to display properly" });
    LongOptionText.Add(new SelectListItem { Value = "2", Text = "Not so long text" });
    LongOptionText.Add(new SelectListItem { Value = "3", Text = "More Not so long text" });


    if (selectedLongOptionText != null & selectedLongOptionText != 0)
    {
        foreach (var item in LongOptionText)
        {
            if (Convert.ToInt32(item.Value) == selectedLongOptionText)
            {
                item.Selected = true;
                break;
            }
        }
    }

    ViewBag.LongOptionText = LongOptionText;
}

Answer 1

We could change the Select element and Options font size by setting the CSS font-size property.

Please check the following sample:

<style>
    select {
        font-size: 8px !important;
        text-overflow: ellipsis;
    }
    select option{
        font-size:10px;
    }
</style>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label asp-for="LongOptionText" class="control-label"></label>
                    <select asp-for="LongOptionText" class="form-control select" asp-items="@ViewBag.LongOptionText"></select>
                    <span asp-validation-for="LongOptionText" class="text-danger"></span>
                </div>
            </div>
        </div>

The output as below:

If you only want to change the options which contains the long text, you could loop through the options using JQuery, and then add or remove the smallsize style.

sample as below:

<style> 
    .smallsize { 
        font-size:8px !important; 
    } 
</style>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label asp-for="LongOptionText" class="control-label"></label>
                    <select asp-for="LongOptionText" class="form-control select" asp-items="@ViewBag.LongOptionText"></select>
                    <span asp-validation-for="LongOptionText" class="text-danger"></span>
                </div>
            </div>
        </div>  
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
    jQuery(document).ready(function () {
        var maxLength = 50;
        //if the text is too long, change the select option font size,
        $('.select > option').text(function (i, text) {
            if (text.length > maxLength) {
                $(this).addClass("smallsize"); 
                //used to add ellipsis. if the text is very very long, we could add ellipsis.
                //return text.substr(0, maxLength) + '...';
            }
            else {
                $(this).removeClass("smallsize"); 
            }
        }); 
        //change the select font size
        $(".select").change(function () {
            var select = $(".select"); 
            //check the selected option text, then based on the text length to set font-size
            if (select.find("option:selected").text().length > maxLength) { 
                select.addClass("smallsize");

                //used to add ellipsis. if the text is very very long, we could add ellipsis.
                //return text.substr(0, maxLength) + '...';
            }
            else {
                select.removeClass("smallsize"); 
            }
        });
    });
</script>

Then, the result like this: