web-dev-qa-db-fra.com

IE & Firefox - La liste déroulante personnalisée ne pouvait pas supprimer les flèches natives

J'essaie de créer un contrôle déroulant personnalisé et je dois masquer les flèches des contrôles natifs. J'utilise la variable CSS suivante, qui fonctionne pour Chrome et Safari, mais pas dans Mozilla et IE.

select.desktopDropDown
{
    appearance: none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}

Voici un [jsfiddle] [1].

cssinternet-explorercustom-controlsmozilla
29
Anton Belev

Utilisez ceci cela fonctionnera mais avec IE10 + et pour FF:

Votre css devrait ressembler à ceci:

select.desktopDropDown::-ms-expand {
    display: none;
}

En savoir plus sur ::ms-expand .

Puis pour le reste:

select.desktopDropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : url("../img/assets/arrow.png") no-repeat right #666;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

Note: J'ai codé en dur le chemin "../img/assets/arrow.png" en arrière-plan.

Cela devrait fonctionner pour IE, Firefox et Opera.

68
Ahmed Na.

Des exemples simples:

Pour I.E:

select::-ms-expand {
    display: none;
}

Pour Firefox:

select {
    -moz-appearance: none;
    appearance: none;

    text-overflow: ''; /* this is important! */
}
17
Jarrod

Pour Fx, j'utilise -moz-appearance: checkbox-container qui fonctionne bien.

Donc, mettre tout cela ensemble devrait vous suffire:

select.desktopDropDown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: checkbox-container;
    border-style: none;
}
select.desktopDropDown::-ms-expand {
    display: none;
}
3
Brett Ryan

En fait, cette astuce est principalement requise pour IE10 + où les flèches sont dans le style Metro de Windows 8, même sous Windows 7. Bien que les utilisateurs de Windows 8 doivent être habitués au style, ils sont utilisés dans le système d'exploitation. Quoi qu'il en soit, je recommanderais au lieu d'utiliser:

display: none;

Utiliser:

visibility: hidden;

Parce que, du moins dans IE, le premier fait que la ligne bleue de l'élément sélectionné se superpose à la flèche de la liste déroulante lorsque la sélection est activée, alors que le dernier ne le fait pas. 

2
KS74

nous pouvons créer une personnalisation en utilisant css. testé sur IE10, Mozilla et chrome borwser ...
Exemple de travail comme ci-dessous:

.customSelect {
  position: relative;
}

/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}

.customSelect:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 18px;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.customSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  display: block;
  width: 100%;
  height: 50px;
  float: none;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-Word-break: normal;
  Word-break: normal;
}
<div class="customSelect">
  <label>
      <select>
          <option selected> Select Box </option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Last long option</option>
      </select>
  </label>
</div>

0
SantoshK