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>
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;
}