web-dev-qa-db-fra.com

Sélectionnez le style de flèche

J'essaie de remplacer la flèche d'une sélection par une image de la mienne. J'inclus la sélection dans une div de même taille, je règle l'arrière-plan de la sélection comme transparent et j'inclus une image (avec la même taille que la flèche) dans le coin supérieur droit de la div en tant qu'arrière-plan.

Cela ne fonctionne que dans Chrome.

enter image description here

Comment puis-je le faire fonctionner dans Firefox et IE9 où je reçois ceci:

enter image description here

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}
<HTML>

<HEAD>
</HEAD>

<BODY>
  <p/>
  <form action="/prepareUpdateCategoryList.do?forwardto=search">

    <fieldset class="block" id="searchBlock">
      <p>
        <label style="width:80px">Class</label>
        <div class="styled-select">
          <select property="voucherCategoryClass">
                <option value="0">Select </option>
                <option value="7382">Steam </option>
        </select>
        </div>

      </p>
    </fieldset>
  </form>
</BODY>

</HTML>
cssselect
96
user1802439

Avez-vous essayé quelque chose comme ça:

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

N'a pas testé, mais devrait fonctionner.

EDIT: Il semble que Firefox ne supporte pas cette fonctionnalité jusqu'à la version 35 ( en savoir plus ici )

Il existe une solution de contournement ici , jetez un coup d'œil à jsfiddle sur ce message.

100
Morpheus

Travailler avec une seule classe:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/

36
Julio Marins

J'ai configuré un select avec une flèche personnalisée similaire à celle de Julio, mais sa largeur n'est pas définie et il utilise un svg comme image d'arrière-plan. (arrow_drop_down à partir des icônes Material-ui)

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

enter image description here

Si vous en avez également besoin dans IE, mettez à jour la flèche de svg en base64 et ajoutez ce qui suit:

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

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
32
svnm

Voici un correctif élégant qui utilise une étendue pour afficher la valeur.

La mise en page est comme ça:

<div class="selectDiv">
   <span class="selectDefault"></span>
   <select name="txtCountry" class="selectBox">
      <option class="defualt-text">-- Select Country --</option>
      <option value="1">Abkhazia</option>
      <option value="2">Afghanistan</option>
   </select>
</div>

JsFiddle

27
Peter Drinnan

Cela fonctionnerait bien surtout pour ceux qui utilisent Bootstrap, testé dans les dernières versions de navigateur:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <select class="form-control">
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
      </select>
    </div>
  </div>
</div>
15
Siavas

Vérifiez celui-ci C'est hacky, simple comme ça:

  • Définissez -prefix-appearance sur none pour supprimer les styles
  • Utilisez text-indent pour "pousser" le contenu un peu à droite
  • Enfin, définissez text-overflow sur une chaîne vide. Tout ce qui dépasse de sa largeur deviendra… rien! Et cela inclut la flèche.

Maintenant, vous êtes libre de le styler comme vous le souhaitez :)

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  text-indent: 1px;
  text-overflow: '';
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 2px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

Voir sur JSFiddle

7
sunilkjt

Cela fonctionne dans tous les navigateurs:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;

}
5
kishan Radadiya

Donnez un style à l'étiquette avec CSS et utilisez des événements de pointeur:

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

et le CSS relatif est

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

Je viens d'utiliser une flèche vers le bas ici, mais vous pouvez définir un bloc avec une image d'arrière-plan. Voici un exemple de vilain violon: https://jsfiddle.net/1rofzz89/

5
Dario Corno

J'ai référé ceci post , cela a fonctionné comme un charme, sauf qu'il n'a pas caché la flèche dans le navigateur IE.

Cependant, ajouter ce qui suit cache la flèche dans IE:

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

Solution complète (sass)

$select-border-color: #ccc;
$select-focus-color: green;

select {

    cursor: pointer;
    /* styling */
    background-color: white;
    border: 1px solid $select-border-color;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;

    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),
    linear-gradient(135deg, $select-border-color 50%, transparent 50%),
    linear-gradient(to right, $select-border-color, $select-border-color);
    background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;

    /* Very imp: hide arrow in IE */
    &::-ms-expand {
      display: none;
    }

    &:-moz-focusring {
      color: transparent;
      text-shadow: none;
    }

    &:focus {
      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);
      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
      background-size: 5px 5px, 5px 5px, 1px 1.5em;
      background-repeat: no-repeat;
      border-color: $select-focus-color;
      outline: 0;
    }
  }
1
Maverick09

Cette quantité de code suffit à changer l’icône de flèche par défaut:

.selectDrop{
      background: url(../images/icn-down-arrow-light.png) no-repeat right #ddd; /*To change default icon with provided image*/
      -webkit-appearance:none; /*For hiding default pointer of drop-down on Chrome*/
      -moz-appearance:none; /*For hiding default pointer of drop-down on Mozilla*/
      background-position-x: 143px; /*Adjust according to width of dropdown*/
    }
0
Siddharth