2

Amigos, tengo un estilo que no me funciona en Chrome, pero sí en Firefox. Es un estilo para agrandar un poco más el option de un select y lo aplico directamente al elemento option. Les dejo el estilo:

        <div class="form-group col-sm-3">
          <label for="selTorneo">Seleccione Torneo:</label>
          <select class="form-control" id="selTorneo">
          </select>
        </div>


option
{
    height: 40px;
    max-height: 40px;
    padding-top: 10px;
    padding-left: 10px;
}

Si existe una mejor manera de hacer esto, quedo atento

2
  • 1
    Prueba poniendo esto a la hora de vincular tu CSS: src="/css/styles.css?v=aqui_un_numero_aleatorio". Hay veces que Chrome no recarga bien el CSS. Puede ser problema de eso el 25 may. 2017 a las 16:44
  • 1
    Hola @cnbandicoot , puse esto <link rel="stylesheet" href="estilo/css_programacion.css?v=2"> pero no funcionó. Gracias de todas formas
    – Luis Pavez
    el 25 may. 2017 a las 16:48

2 respuestas 2

3

Lo que pasa es que la etiqueta option no se le pueden asignar estilos, te dejo una respuesta del foro en inglés donde lo explican:

https://stackoverflow.com/questions/4748875/how-can-i-control-the-height-of-an-option-element-in-webkit

De todas formas, si en lugar de asignar a option esos estilos, se los asignas directamente al select, si que te funciona, te dejo el ejemplo:

<style type="text/css">
    select {
        height: 40px;
        max-height: 40px;
        padding-top: 10px;
        padding-left: 10px;
    }
</style>
<div class="form-group col-sm-3">
    <label for="selTorneo">Seleccione Torneo:</label>
    <select class="form-control" id="selTorneo">
        <option value="1">Ejemplo</value>
    </select>
</div>
1
  • 1
    No me funcionó con el select en ambos navegadores. Gracis por la información del option.
    – Luis Pavez
    el 25 may. 2017 a las 17:22
2

Lamentablemente dar padding ni heigth a un <option> en chrome no es posible

padding Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.

.selector option{
    font-size : 20px;
    background-color : red;
 }
<div class="form-group col-sm-3">
  <label for="selTorneo">Seleccione Torneo:</label>
  <select class="form-control selector" id="selTorneo">
      <option>1</option>
      <option>2</option>
      <option>3</option>
  </select>
</div>

2
  • 1
    Gracias, no esperaba que no se pudiera hacer algo así. Buscaré una alternativa.
    – Luis Pavez
    el 25 may. 2017 a las 17:23
  • 1
    Perfecto, puedes ocupar frameworks de style como bootstrap que combinan librerias jquery para tu ayuda!. Si te ayudo mi respuesta recuerda marcarla :) saludos!
    – sioesi
    el 25 may. 2017 a las 17:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.