Supprimer le rayon de la bordure de la balise Select dans le bootstrap 3

Cela semble être un problème sortingvial, mais je ne peux pas le comprendre.

Sur Bootstraps propre site, ils ont l’exemple Select.

bootstrap select

En regardant le code, il semble qu’il y ait un rayon de bordure de 4 sur cet élément sélectionné. entrer la description de l'image ici

J’espère que changer le rayon de la bordure à 0 supprimerait alors le rayon de la bordure de l’élément select, mais ce n’est pas le cas – comme le montre l’image ci-dessous.

entrer la description de l'image ici

J’ai exploré tous les CSS qui changent cet élément de sélection, mais rien ne semble supprimer le rayon de la bordure.

En plus de border-radius: 0 , ajoutez -webkit-appearance: none; .

Voici une version qui fonctionne dans tous les navigateurs modernes. La clé utilise l’ appearance:none qui supprime le formatage par défaut. Étant donné que tout le formatage a disparu, vous devez rappend dans la flèche qui différencie visuellement la sélection de l’entrée. Remarque: l’ appearance n’est pas prise en charge dans IE .

Exemple de travail: https://jsfiddle.net/gs2q1c7p/

 select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); padding: .5em; padding-right: 1.5em } #mySelect { border-radius: 0 } 
  

J’ai eu le même problème et alors que la réponse de user1732055 corrige la bordure, elle supprime les flèches de la liste déroulante. J’ai résolu ce problème en supprimant la bordure de l’élément select et en créant un wrapper qui a une bordure.

html:

    

css:

 select.no-radius{ border:none; } .select-wrapper{ border: 1px solid black; border-radius: 0px; } 

https://jsfiddle.net/Lrqh0drd/6/

Vous pouvez utiliser -webkit-border-radius: 0; . Comme ça:-

 -webkit-border-radius: 0; border: 0; outline: 1px solid grey; outline-offset: -1px; 

Cela donnera des coins carrés ainsi que des flèches déroulantes. Utilisation -webkit-appearance: none; n’est pas recommandé car il désactivera tous les styles effectués par Chrome.

En utilisant le SVG de @ArnoTenkink comme une URL de données combinée à la réponse acceptée, cela nous donne la solution parfaite pour les écrans de rétine.

 select.form-control:not([multiple]) { border-radius: 0; appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E); padding: .5em; padding-right: 1.5em } 

la classe s’appelle:

 .form-control { border-radius: 0; } 

assurez-vous d’insérer la substitution après avoir inclus bootstraps css.

Si vous souhaitez UNIQUEMENT supprimer le rayon sur certains contrôles de formulaire, utilisez

 select.form-control { ... } 

au lieu

EDIT: fonctionne pour moi sur chrome, firefox, opera et safari, IE9 + (tous fonctionnant sur Linux / Safari & IE sur playonlinux)