Quiero cambiar el tamaño de fuente de uno de mis cuadros de selección. Pero no está funcionando:
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>La solución:
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; }La mejor respuesta que he descubierto para este problema es envolver la selección en un div y configurar el CSS de la siguiente manera.
CSS:
.fooSelect { display:inline; } .fooSelect .select2-selection__rendered { font-size:1.2em; }Otro código:
<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>Simplemente agregue a cada clase de opción y utilícelo.
en el archivo js
$("#e1 option,#e2 option").addClass("font-size-4"); $(".select2").select2();En archivo Css
.font-size-4{ font-size:4px; }