CSS style does not work for me in Chrome

Question

CSS style does not work for me in Chrome

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Friends, I have a style that does not work for me in Chrome, but it does work in Firefox. It is a style to enlarge a little more the option of a select and I apply it directly to the option element. I leave the style:

        <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;
}

If there is a better way to do this, I remain attentive

css

asked by Luis Pavez 25.05.2017 в 18:41

source

2 answers

Values of a Select - Javascript Result in repeated C ++ screen [closed]

score 2 · Answer 1

What happens is that the option tag can not be assigned styles, I leave a response from the forum in English where they explain:

link

Anyway, if instead of assigning those styles to option, you assign them directly to the select, if it works for you, I'll give you the example:

<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>

score 1 · Answer 2

Unfortunately, giving padding ni heigth to <option> in chrome is not possible

padding Setting padding on an optgroup or option has no effect in Chrome so you can not 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>