web-dev-qa-db-fra.com

Suppression des coins arrondis d'un élément <select> dans Chrome/Webkit

La feuille de style de l'agent utilisateur pour Chrome attribue un rayon de 5px à tous les coins d'un élément <select>. J'ai essayé de m'en débarrasser en appliquant un rayon de 0px à travers ma feuille de style externe, ainsi que l'élément en ligne; J'ai essayé à la fois border-radius:0px et -webkit-border-radius:0px; et j'ai essayé le border-top-left-radius:0px, encore plus spécifique (avec son équivalent -webkit).

Aucun ne fonctionne.

Lorsque j'examine l'élément dans les outils de développement de webkit, le style calculé indique toujours le rayon de 5px. Mais si je clique sur la flèche d’agrandissement à côté de celui-ci pour afficher les détails, il se lit comme suit: element.style - 0px. Et en dessous, il montre la spécification css externe que j’ai donnée de 0px, ainsi que la spécification de feuille de style user-agent de 5px. Et ces deux derniers sont barrés, comme il se doit.

Des idées?

cssselectwebkitcss3
119
maxedison

Cela fonctionne pour moi (définit la première apparition et non la liste déroulante):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

214
antonj

Juste ma solution avec image déroulante (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

Alternative (comme celle ci-dessus ne fonctionne pas avec le dernier firefox)

select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}

J'utilise bootstrap c'est pourquoi j'ai utilisé select.form-control
Vous pouvez utiliser select{ ou select.your-custom-class{ à la place.

75
Afzal Hossain

Si vous voulez des bords carrés et que vous voulez toujours la petite flèche d’extension, je vous recommande

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
26
jordan314

Quelques bonnes solutions ici mais celle-ci n’a pas besoin de SVG, conserve la bordure via outline et la positionne au ras du bouton.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}
<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

6
aleemb

Alors que la réponse du haut supprime la bordure, elle supprime également la flèche, ce qui rend extrêmement difficile, voire impossible, l’identification de l’élément par l’utilisateur.

Ma solution consistait simplement à coller un div blanc (avec border-radius: 0px) derrière le select. Définissez sa position sur absolue, sa hauteur sur celle du select et vous devriez être prêt à partir!

5
Reed Martin

Solution avec flèche déroulante droite personnalisée, utilise uniquement css (pas d'images)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  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;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}
<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

1
Mihai Crăiță

L'encadré Box-Shadow fait l'affaire.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Démo

1
Marconi

Une façon de garder les choses simples et d'éviter de jouer avec les flèches et autres caractéristiques similaires consiste simplement à la placer dans une div avec la même couleur de fond que la balise select. 

0
Danny Santos

eh bien, j'ai la solution. J'espère que ça peut vous aider :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }
<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

0
Amit

L'élimination des flèches devrait être évitée. Une solution qui préserve les flèches déroulantes consiste à supprimer d’abord les styles de la liste déroulante:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Créez ensuite div directement avant la liste déroulante dans votre code HTML:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

Et coiffez la div comme ceci:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

Display inline empêchera la division de passer à une nouvelle ligne, position absolute la supprimera du flux de la page. Le résultat final est un soulignement clair et agréable que vous pouvez styler à votre guise et votre liste déroulante se comporte toujours comme l’attend l’utilisateur.

0
devigner

Pour une raison quelconque, il est effectivement affecté par la couleur de la bordure ??? Lorsque vous utilisez la couleur standard, les coins restent arrondis, mais si vous modifiez légèrement la couleur, l'arrondi disparaît.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

0
mcallahan