Change jQuery Select2 Plugin DropDownList Font size in ASP.Net

ahmadsubuhanlubis
 
on Jan 20, 2023 12:41 AM
530 Views

hi

I have try applying this sample but, how to change name and size font on display combobox.

Using jQuery Select2 Plugin with DropDownList in ASP.Net

thanks

Download FREE API for Word, Excel and PDF in ASP.Net: Download
AjayV
 
on Jan 20, 2023 06:59 AM
on Jan 20, 2023 07:01 AM

Hi ahmadsubuhanlubis,

Please refer sample below.

 HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <style type="text/css">
        .form-control { width: 200px !important; }
        .select2-selection__rendered { font-size: small !important; }
        
        
        .select2-results__option { font-size: large !important; }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".js-example-placeholder-single").select2({
                placeholder: "Select",
                allowClear: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container-fluid" style="padding-top: 10px !important;">
        <asp:DropDownList ID="ddlsup" runat="server" class="form-control js-example-placeholder-single">
            <asp:ListItem Text="-Please Select-" />
            <asp:ListItem Text="One" Value="1" />
            <asp:ListItem Text="Two" Value="2" />
            <asp:ListItem Text="Three" Value="3" />
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

Screenshot