border css ne marche pas sur chrome

Salut,

marche bien sur chrome par contre dans chrome ne s'affiche pas

Dans ton HTML il y a bien :
<option class="getPrice"> ?

Et dans ton CSS tu ne réécrases pas la border plus loin dans le fichier ?

non le css ne s'écrase pas et déja le color , et le background sont appliqués, je pense que le probleme du google chrome car firefox ça fonctionne correctement , tu peux essayé sur ta machine .

Ah oui étrange, je viens de tester. Pas de border sur Chrome, et sur Firefox ça passe.

[Edit] Mince je ne trouve pas de solution...

Merci pour tes éfforts

Yop. Pas moyen de le faire sur Chrome a moins que tu utilises un select avec l'attribut 'multiple'.

N'y a t-il pas une connerie de prefix a mettre -webkit- a mettre ?

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

select::-ms-expand { /* pour IE 11 */
    display: none;
}

//exemple
.select_class {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_class select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_class select:focus {
  outline: none;
}

<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_class" style="margin-left:15px">
    <select name="select">
      <option>-- Select  --</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
</div>

Je n'ai pas vraiment compris en faite c'est l'option que tu veut styliser ?

Ouais, dans un select, chaque option qui est "pointée" par le curseur de la souri, doit avoir une border, et ne plus en avoir quand elle n'est plus pointée.

tu peux tester ce code sur chrome et firefox

 <select>
 <option>Price</option>
 <option>10000</option>
 <option>20000</option>
 <option>30000</option>
<option class="getPrice">Enter your price</option>
</select>

select option.getPrice{
    background:#F8F8F8;
    color:#979797;
    border:1px solid red;
}

tu peut convertir des select avec des list "li" avec un peut de js ou les média query tu poura obtenir ce que tu souhaite.

exemple

"select" est effectivement très limité en terme de personnalisation, la seule solution est effectivement de simuler un "select" avec du JS/CSS.

Si toutefois tu n'es pas à l'aise avec tout ça, il existe de nombreux plugins jQuery (par exemple) qui font ça. Personnelement, je préfère travailler avec mes propres scripts car ce genre de plugin va savoir tout faire alors que tu ne veux que styliser ton select, mais c'est une possibilité.

En bref :
ton select fermé : un div visible avec la valeur par défaut (en position: relative;)
tes options : un div "display:none;position absolute;top:100%;left:0;" contenant la liste des choix (pense à mettre un overflow: auto; max-height: 250px; pour éviter que le bloc ne fasse 10km de long si tu as beaucoup de choix)
une option : dans un li par exemple (que tu peux personnaliser à souhait)
un input hidden : qui contiendra la valeur à envoyer
un peu de JS pour mettre en display:block; ta liste d'options quand tu clic sur le select, et un évenement sur le clic d'une option qui va mettre le texte de l'option dans le "div de ton select fermé", ainsi que la "value" dans ton "input hidden"

Merci à tous