Remove border radius from Select tag in bootstrap 3

Question

This seems like a trivial problem  but I can t figure it out   On Bootstraps own website they have the Select example       Looking at the code it looks like there s a border-radius of 4 on that select element      My hope would be that changing that border-radius to 0 would then remove the border-radius from the select element  however  that s not the case - as seen in the picture below      I ve explored all the CSS that is changing that select element but none of it seems to remove the border radius

User · Answer

You can use -webkit-border-radius  0   Like this -  -webkit-border-radius  0  border  0  outline  1px solid grey  outline-offset  -1px    This will give square corners as well as dropdown arrows  Using -webkit-appearance  none  is not recommended as it will turn off all the styling done by Chrome

User · Answer

In addition to border-radius  0  add -webkit-appearance  none

User · Answer

Using the SVG from  ArnoTenkink as an data url combined with the accepted answer  this gives us the perfect solution for retina displays   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

User · Answer

I had the same issue and while user1732055 s answer fixes the border  it removes the dropdown arrows   I solved this by removing the border from the select element and creating a wrapper span which has a border   html    lt span class  select-wrapper  gt       lt select class  form-control no-radius  gt           lt option value  1  gt 1 lt  option gt           lt option value  2  gt 2 lt  option gt           lt option value  3  gt 3 lt  option gt       lt  select gt   lt  span gt    css   select no-radius      border none         select-wrapper      border  1px solid black      border-radius  0px      https   jsfiddle net Lrqh0drd 6

User · Answer

Here is a version that works in all modern browsers  The key is using appearance none which removes the default formatting  Since all of the formatting is gone  you have to add back in the arrow that visually differentiates the select from the input  Note  appearance is not supported in IE   Working example  https   jsfiddle net gs2q1c7p    x000D   x000D  select not  multiple     x000D      -webkit-appearance  none  x000D      -moz-appearance  none  x000D      background-position  right 50   x000D      background-repeat  no-repeat  x000D      background-image  url data image png base64 iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw eHBhY2tldCBiZWdpbj0i77u IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI PuGsgwQAAAA5SURBVHjaYvz  z8DOYCJgUxAf42MQIzTk0D M KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH do8AAAAASUVORK5CYII    x000D      padding   5em  x000D      padding-right  1 5em x000D    x000D   x000D   mySelect   x000D      border-radius  0 x000D    x000D   lt select id  mySelect  gt  x000D       lt option gt Option 1 lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Based on Arno Tenkink s suggestion in the comments  here is an example using a svg instead of a png for the arrow icon    x000D   x000D  select not  multiple     x000D      -webkit-appearance  none  x000D      -moz-appearance  none  x000D      background-position  right 50   x000D      background-repeat  no-repeat  x000D      background-image  url  data image svg xml utf8  lt  xml version  1 0  encoding  utf-8   gt  lt  DOCTYPE svg PUBLIC  -  W3C  DTD SVG 1 1  EN   http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt  lt svg xmlns  http   www w3 org 2000 svg  width  14  height  12  version  1  gt  lt path d  M4 8L0 4h8z   gt  lt  svg gt     x000D      padding   5em  x000D      padding-right  1 5em x000D    x000D   x000D   mySelect   x000D      border-radius  0 x000D    x000D   lt select id  mySelect  gt  x000D       lt option gt Option 1 lt  option gt  x000D       lt option gt Option 2 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

the class is called    form-control   border-radius  0      be sure to insert the override after including bootstraps css    If you ONLY want to remove the radius on select form-controls use  select form-control           instead  EDIT  works for me on chrome  firefox  opera  and safari  IE9   all running on linux safari  amp  IE on playonlinux

[css] Remove border radius from Select tag in bootstrap 3

Examples related to css

Examples related to twitter-bootstrap