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

143

La feuille de style de l'agent utilisateur pour Chrome donne un rayon de bordure de 5 px à tous les coins d'un <select>élément. J'ai essayé de me débarrasser de cela en appliquant un rayon de 0px via ma feuille de style externe, ainsi qu'en ligne sur l'élément lui-même; J'ai essayé les deux border-radius:0pxet -webkit-border-radius:0px;j'ai essayé le plus spécifique border-top-left-radius:0px(avec son équivalent -webkit).

Aucun ne fonctionne.

Lorsque j'examine l'élément dans les outils de développement de Webkit, le style calculé répertorie toujours le rayon comme 5px. Mais si je clique sur la flèche d'expansion à côté pour voir les détails, il lit: element.style - 0px. Et ci-dessous, il montre la spécification css externe que j'ai donnée de 0px, ainsi que la spécification de feuille de style utilisateur-agent de 5px. Et ces deux derniers sont barrés, comme ils devraient l'être.

Des idées?

select webkit css maxedison
la source

Pourriez-vous également poster le code? Encore mieux si vous le publiez en utilisant jsfiddle.net.

ngen

1

En fait, je n'ai pas de rayon de bordure comme style par défaut dans Chrome 10 sur Win7, peut-être s'agit-il d'une autre version ou d'un système d'exploitation?

Wesley Murch le

Pas de coins arrondis dans Chrome 12 sur Windows 7 non plus.

andyb

1

J'aurais dû mentionner que c'est sur Mac OS X.

maxedison

244

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

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

http://jsfiddle.net/fMuPt/

Antonj
la source

179

Un moyen de supprimer les coins arrondis mais de garder les flèches à droite?

Adam

3

vous devez ajouter les flèches, par exemple comme image de fond avec la position 100% 50% et l'attribut sans répétition. J'ai également utilisé une image encodée en base64 en css pour éviter des requêtes http supplémentaires.

Karl Adler

26

@Adam Cela a fonctionné pour moi si vous utilisez border: 0et ajoutez un plan comme:outline: 1px inset black; outline-offset:-1px

Filipe Pereira

1

@FilipePereira Nice Je l'aime bien, même si je devrai ajouter que contour-offset n'est pas pris en charge par IE.

Tim

6

Cela élimine les flèches sur la droite, qui endommagent de manière inacceptable l'expérience utilisateur. Au lieu de cela, stylisez le menu déroulant background-color: #yourbg, border-style: nonepuis créez un div directement avant le menu déroulant avec position: absoluteet border-bottom: 1px solid #youpicket display: inline. Flèches préservées, UX indemne, meilleure correction.

devigner

90

Juste ma solution avec une 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='%23444' 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;
}

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

Afzal Hossain
la source

4

C'est la seule réponse qui a résolu mon problème, mais n'oubliez pas d'utiliser background vs background-image car la couleur de remplissage du svg écrasera toute couleur d'arrière-plan que vous aviez définie pour votre entrée.

Lucas M

D'accord, veuillez voter pour cette réponse! Je ne comprends pas les autres votes sur une réponse incomplète. Un conseil pour utiliser l'icône fontawesome au lieu du svg en ligne?

Nicolas Thery

FontAwesome est une collection d'icônes mais vous n'avez besoin que d'une seule icône. Vous devez donc extraire l'une des icônes FA à l'aide d'un outil comme icomoon.io Après cela, exportez cette icône sous forme de fichier svg ou png et liez-la à partir de votre css

Afzal Hossain

Belle solution, mais dans ma situation j'ai ajouté background-color: white;

Viktor Bogutskii

Notez cependant que lorsque vous définissez width: auto;, la flèche svg ajoutée recouvre le contenu de la sélection. Cela nécessite un rembourrage supplémentaire sur le côté droit de 16px. Ce remplissage est cependant visible sur tous les navigateurs, cassant le design sur les autres navigateurs. Je n'ai pas encore de solution pour cela ...

Klaas van der Weij

31

Si vous voulez des bordures carrées et que vous voulez toujours la petite flèche d'extension, je vous recommande ceci:

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

Jordanie314
la source

2

Le problème avec ceci est que vous remplacerez la valeur par défaut outlinesur :focus. Si vous allez utiliser cette réponse, vous devez changer votre select:focusstyle à montrer visuellement que l' selectélément est devient actif, ou :focused, en cliquant dessus.

Devin McInnis

@ jordan314 Découvrez les coins arrondis sur cette photo . Rayon de la frontière: 0; n'a aucun effet sur la balise de sélection. Au moins sur Chrome OSX de toute façon.

Jammer

1

@ 7immy c'est étrange, je suis également sur Chrome OS X et voici une capture d'écran du violon ci-dessus imgur.com/r6ce6Yv

jordan314

1

@ jordan314 Et ça? jsfiddle.net/78xa6qud/2 . Je suppose que nous pouvons nous en tirer si l'arrière-plan de la sélection et l'arrière-plan derrière sont de la même couleur.

Jammer

@ 7immy ah oui, je suppose que c'est une mise en garde.

jordan314

7

Quelques bonnes solutions ici mais celle-ci n'a pas besoin de SVG, préserve la bordure via outlineet la met 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>

Développer l'extrait

Aleemb
la source

6

Bien que la réponse du haut supprime la bordure, elle supprime également la flèche, ce qui rend extrêmement difficile, voire impossible, pour l'utilisateur d'identifier l'élément en tant que sélection.

Ma solution était de simplement coller un div blanc (avec un rayon de bordure: 0px) derrière le select. Réglez sa position sur absolue, sa hauteur sur la hauteur de la sélection, et vous devriez être prêt à partir!

Reed Martin
la source

4

Solution avec flèche déroulante droite personnalisée, utilise uniquement le 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>

Développer l'extrait

Mihai Crăiță
la source

Le positionnement en arrière-plan qui a mieux fonctionné pour mes besoins était: background-position: calc(100% - 4px) center, 100% center;Cela déplace la flèche vers le milieu de la sélection et tout le chemin vers la droite. Merci beaucoup pour ce bon début!

Brandon le

3

Une façon de rester simple et d'éviter de jouer avec les flèches et d'autres fonctionnalités de ce type est simplement de le loger dans un div avec la même couleur d'arrière-plan que la balise de sélection.

Danny Santos
la source

1

Je suis d'accord, c'est de loin la solution la plus simple, la plus fiable et la plus portable.

John Henckel

1

Il faut éviter d'éliminer les flèches. Une solution qui préserve les flèches de la liste déroulante consiste d'abord à supprimer les styles de la liste déroulante:

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

Ensuite, créez un div directement avant le menu déroulant dans votre HTML:

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

Et stylisez le div comme ceci:

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

L'affichage en ligne empêchera le div d'aller sur une nouvelle ligne, la position absolue le supprime du flux de la page. Le résultat final est un joli soulignement propre que vous pouvez styliser comme vous le souhaitez, et votre liste déroulante se comporte toujours comme l'utilisateur s'y attend.

devigner
la source

1

L'ombre de la boîte en médaillon 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

Marco Allori
la source

0

Pour une raison quelconque, il est en fait affecté par la couleur de la bordure ??? Lorsque vous utilisez la couleur standard, les coins restent arrondis, mais si vous modifiez la couleur même légèrement, 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/

mcallahan
la source

Hmm pas sûr d'OSX. Je viens de le réessayer sur Windows (Chrome Version 45.0) et cela fonctionne toujours. Je suppose que pour rendre le problème encore plus étrange, c'est spécifique à la plate-forme ...

mcallahan

En effet, la définition de la bordure oblige le navigateur à rendre la zone de liste déroulante elle-même, plutôt que d'utiliser celle sous-jacente fournie par le système d'exploitation.

Kong

0

eh bien j'ai la solution. j'espère que cela 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>

Développer l'extrait

Amit
la source

0

Voici la façon de le faire;

Créez une image d'arrière-plan qui ressemble à une liste déroulante.
Désactiver l'apparence du navigateur
Alignez l'image d'arrière-plan sur le composant sélectionné

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

Jérôme Anthony
la source

-1

J'ai utilisé la solution de jordan314, mais j'ai ensuite ajouté la classe "border-light" pour sélectionner. Si vous avez défini la classe border-light par défaut en css, vous pouvez l'utiliser directement. Il définit simplement la bordure comme blanche). J'ai changé la bordure en carré / supprimer le rayon et j'ai maintenu la flèche.

Voici ce que j'ai fait:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

si vous n'avez pas le border-light prédéfini, ajoutez simplement votre css:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

Sitti Munirah Abdul Razak
la source

-8

Firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

David Forstner
la source

La question sur Chrome / Webkit.

zishe

-10

Définissez le CSS comme

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Essayez si cela fonctionne.

AbhiRoczz ...
la source

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

Réponses: