Select closing when clicking on all IE's

1

I'm having a problem, which in all versions of Internet Explorer, when clicking a select, it automatically closes when moving the cursor, without the possibility of choosing one of the OPTIONS:

<formaction="/pesquisar" name="formpesqf" method="POST" class="form-search form-private">
        <div class="input text">
            <label for="text">Nome do produto ou referência</label>
            <input type="text" name="textfield" id="text" class="f field-top" title="Nome do produto ou referência" placeholder="Nome do produto ou referência" />
        </div>
        <input type="submit" name="buton" value="Pesquisar" class="btn-search fleft transition" />
        <div class="input select">
            <label for="grupo">Buscar por grupo:</label>
            <select name="grupo" class="sel-header" onChange="submit();">
                <option value="">Selecione</option>
                <!-- BEGIN BLOCK_SESSAO_FLUTUANTE -->
                <option value="{value_ses}" {SELECTED_GRUPO}>{text_ses}</option>
                <!-- END BLOCK_SESSAO_FLUTUANTE -->
            </select>
        </div>
      <div class="input select">
           <label for="marca">Buscar por marca:</label>
           <select name="marca" id="marca" class="sel-header" onChange="submit();">
               <option value="">Selecione</option>
               <!-- BEGIN BLOCK_MARCA_FLUTUANTE -->
               <option value="{value_mc}" {SELECTED_MARCA}>{text_mc}</option>
               <!-- END BLOCK_MARCA_FLUTUANTE -->
           </select>
      </div>
   </form>

.sel-header {
    margin: 0;
    border: 1px solid #CCCCCC;
    height: 40px;
    background-color: #fff;
    padding: 0 15px;
    width: 170px;
    cursor: pointer;
}

.form-private .f,
.form-private .sel-header {
    font-size: 14px;
    font-family: arial, sans-serif;
    color: #999999;
}
.form-private .btn-search,
.sel-header,
.form-private .f {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
.form-private .f:hover {
    height: 26px;
    width: 327px;
}
.form-private .f:hover,
.form-private .sel-header:hover {
    border: 2px solid #62A639;
}
    
asked by anonymous 10.11.2014 / 14:48

1 answer

1

In the hover of the selects, I was doing the following:

.form-private .f:hover {
    height: 26px;
    width: 327px;
}
.form-private .f:hover,
.form-private .sel-header:hover {
    border: 2px solid #62A639;
}

I just removed the: hovers, and the problem was corrected. : D

    
10.11.2014 / 17:05