> Faqs > Cambiar el tamaño de letra de un menú select

Cambiar el tamaño de letra de un menú select

¿Cómo puedo modificar el tamaño de letra de un menú despleglable o caja de selección ComboBox? Si es posible, también me gustaría saber cómo cambiar tambien el tipo de letra del menú.

Respuestas

Para eso se utilizan las hojas de estilo en cascada. Tenemos un Manual de hojas de estilo en DesarrolloWeb donde se explican lo que son.

Para el caso de los menús desplegables (campos select de formulario) se pueden definir sus características con un código como este:

SELECT {   
   font-size: 8pt;   
   font-family : verdana,arial,helvetica;   
}
Camila
680 29 46 6
Muy buena respuesta, me soluciono el problema que tenia mil gracias.

Actualizado!! Los elementos select ahora sí permiten cambiar los estilos con CSS de manera bastante apurada.

Prueba esta declaración de estilos para cambiar un campo select de una manera bastante radical y edita lo que veas conveniente para ajustarlo a tu gusto.

.campo-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  background-repeat: no-repeat;
  background-color: #fff;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  border-color: #d4d4d8;
  border-width: 1px;
  border-radius: 0.375rem;
  padding-top: 0.6rem;
  padding-right: 2.5rem;
  padding-bottom: 0.6rem;
  padding-left: 0.75rem;
  font-size: 1.1rem;
  line-height: 1.6rem;
}

Solo tienes que aplicar la clase CSS al campo select de formulario:

<select class="campo-select">
  <option value="uno">Opción uno</option>
  <option value="dos">Opción segunda</option>
</select>

Respuesta anterior:

Los elementos select son unos de los más difíciles de editar los estilos en sitios web. Es posible que algunos navegadores acepten algunos pocos atributos CSS para alterar su aspecto, pero el grado de personalización al que se puede llegar es bastante pobre.

Para compensarlo los desarrolladores tradicionalmente han usado componentes. Por ejemplo es muy famosa una librería llamada "select2" basada en jQuery que permite hacer todo tipo de elementos select a los que les puedes personalizar estilo y funcionalidad.

Casi todos los frameworks de diseño, como Bootstrap, Materialize y otros incluyen elementos select a los que le puedes cambiar los estilos, pues en realidad son componentes Javascript que se comportan como un select, no elementos HTML nativos de formulario.

Alternativa:

Sin embargo, para aplicar un comportamiento muy diferente al select te recomendaría es que usases algún Web Component para crear selects. Hay un montón y al final funcionan como una etiqueta nueva que puedes implementar en tu página. Para poder usar Web Components en una página tan solo tienes que incluir un archivo de su código Javascript.

Miguel Angel
3280 145 214 17