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;
}
The best answer I've discovered for this problem is to wrap the select in a div and set the CSS as follows.
CSS:
.fooSelect
{
display:inline;
}
.fooSelect .select2-selection__rendered
{
font-size:1.2em;
}
Other code:
<div class="fooSelect"><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></div>
<script>
$("#e1").select2();
</script>
Just add to every option class and use it.
On js file
$("#e1 option,#e2 option").addClass("font-size-4");
$(".select2").select2();
On Css file
.font-size-4{
font-size:4px;
}