Search code examples
jquerycssjquery-select2

How can I change the font-size of one select box option text (select2) with css?


I want to change the font-size of one of my select boxes. But it is not working:

http://jsfiddle.net/jEADR/3717/

 <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>



<select  id="e1" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>

    <select  id="e2" class="select2" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
<style>
    #e2 .select2-results{
      font-size:4px;
    }
</style>

<script>
$(".select2").select2();
</script>

Solution

  • The solution:

    http://jsfiddle.net/jEADR/3730/

    <select  id="e1" class="select2" style="width:300px">
            <option value="AL">Alabama</option>
            <option value="Am">Amalapuram</option>
            <option value="An">Anakapalli</option>
            <option value="Ak">Akkayapalem</option>
            <option value="WY">Wyoming</option>
        </select>
    
        <select  id="e2" class="select2" style="width:300px">
            <option value="AL">Alabama</option>
            <option value="Am">Amalapuram</option>
            <option value="An">Anakapalli</option>
            <option value="Ak">Akkayapalem</option>
            <option value="WY">Wyoming</option>
        </select>
    
    <script>
    $(".select2").select2();
    $("#e2").select2({ dropdownCssClass: "myFont" });
    </script>
    
    .myFont{
      font-size:4px;
    }