How to resolve stylization error in Select Option options that appears error in Firefox

Asked

Viewed 136 times

1

In Firefox version 48.0, this giving error in styling the options of Select Option.

Follows the code:

<div class="buscaCodigo">

  <div class="form">
  <br /> <br />
   <h2>Entre abaixo com o código</h2>
   <form action="busca.php" method="post">
     <input type="hidden" name="acao"  value="buscaCodigo" />
     <br /> <br />
     <label>Código</label><input type="text" class="typeTextMedio" id="codigo"  name="codigo" required />
    <input type="submit" value="Pequisar" class="btnPesquisa" />
     <br /> <br />
   </form> 
   </div>

  <div class="fechar">
    <img src="_img/btn-close.png" style="width:50px;" />
  </div>

</div>

<div class="buscaImovel"><br />
  <h1 class="h1Centralizado">Pesquise pelo imóvel que deseja</h1>

  <div style="height:10px;"></div>

  <div class="divBusca">

  <form action="busca.php"  method="post">
    <input type="hidden" name="acao" value="buscaPrincipal">

    <div class="camposBusca">
      <?php  $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
      <select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($tiposImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($tiposImoveis as $tipoImovel) {

                   echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
               }
             }
           ?>
      </select>
    </div>

    <div class="camposBusca">
      <?php  $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
      <select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($bairrosImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($bairrosImoveis as $bairrosImovel) {
                   echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
               }
             }
           ?>
      </select>      
    </div>

    <div class="camposBusca">
      <input type="submit" class="btnPesquisa" value="Pesquisar"  />
    </div>

  </form>
  </div>

  <div style="height:15px;"></div>

  <div class="alternativaEscolha">
    <a href="buscaAvancada.php">
      <label class="labelGrande" style="background-color:#CCC; font-weight:bold; color:#000;">Busca Avançada</label>
    </a> 
  </div>

  <div class="alternativaEscolha"> 
    <!--abrir popUp--> 
        <label class="labelGrande" style="background-color:#CCC; font-weight:bold; color:#000">Busca por Código</label> 
  </div>

</div>

Which in firefox generates the following image: inserir a descrição da imagem aqui

In Chorme and IE appears correctly,

inserir a descrição da imagem aqui

This select that goes wrong in firefox, has its stylized options also wrong. inserir a descrição da imagem aqui

Whereas in Chrome and IE this styling is correct: inserir a descrição da imagem aqui

How to solve this?

  • Pass the site link and I can fix it, or see about Mozilla css

  • not yet published. It would have some code that I could post that would help?

  • I understand, put the example code for me to see from the site www.codepen.io, jsfiddle.net or www.codeply.com ... want my skype?!

  • I did better, I put in another lodging I have: http://funerariasaopedro.net.br/caimoveismuriae.com.br/index.php

  • What is the version your firefox? here new version this right, it is div care of father without display and son with display, and fix father div .divBusca { display: flex; } and another div son .camposBusca { display: inline-flex; }. If you are using inline-block and use parent block. Let me know and help again.

  • I don’t particularly like jquery-ui, I prefer Select2 https://plugins.jquery.com/select2/ or Chosen https://plugins.jquery.com/chosen/ Maybe this one will look better in firefox

  • firefox 48.0 I use. also giving error

  • reduces the text and fits

  • @Carlosrocha Hum... I’m not saying jquery-ui, it’s CSS. Already tested q passed the code? to reduce the font is beauty.

  • Already tested, gave no same. I understood to be css.

  • Try to use vertical-align: middle.

Show 6 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.