Tengo un listbox y quiero disminuir su ancho.
Aquí está mi código:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
Este código funciona en IE 6 pero no en Mozilla Firefox (última versión). ¿Puede alguien decirme cómo puedo reducir el ancho
de la lista desplegable en Firefox?
Prueba este código:
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSS:
#wgtmsr{
width:150px;
}
Si quieres cambiar el ancho de la opción puedes hacerlo en tu css:
#wgtmsr option{
width:150px;
}
Tal vez tienes un conflicto en tus reglas css que anulan el ancho de tu select
[DEMO][1]
prueba el argumento !important
para asegurarte de que el CSS no entra en conflicto con otros estilos que hayas especificado. También es bueno usar un reset.css antes de añadir tus propios estilos.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
o
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Crear un css y establecer el valor `style="width:50px;"en el código css. Llame a la clase de CSS en la lista desplegable. Entonces funcionará.