How to remove the default border radius ,Select2

Question

I'mm using https://select2.github.io/examples.html but I don't want the border radius. How can I remove border radius to make the search box as well as the sliding area ?

Answer 1

You can add this css :

[class^='select2'] {
  border-radius: 0px !important;
}

fiddle : http://jsfiddle.net/jEADR/1537/

Answer 2

Well I've just tried to do a trick basically in jquery as below and yea it works!!

Execute below 2 lines once you initialize your select2

$('.select2-selection').css('border-radius','0px')
$('.select2-container').children().css('border-radius','0px')

Answer 3

I really appreciate all the answers in this thread, as they helped me find a good solution.

I'm using Ruby on Rails 5.2.0, and I felt that any JQuery or JavaScript solutions felt a little hacky and after-the-fact especially since it should be doable in vanilla CSS - but I felt that using the CSS !important tag isn't best practice. Not trying to rag on anyone!

So, my CSS is as follows, and works well!

.select2-container--bootstrap .select2-selection{
  border-radius: 0px;
}

Answer 4

Add this to your HTML Header:

<style type="text/css">
   .select2-container {
       box-sizing: border-box;
       display: inline-block;
       margin: 0;
       position: relative;
       vertical-align: middle;
   }

   .select2-container .select2-selection--single {
       box-sizing: border-box;
       cursor: pointer;
       height: 28px;
       user-select: none;
       -webkit-user-select: none;
       display: contents;
   }
</style>

Answer 5

Open file select2.min.css located dist/css/select2.min.css. locate the border radius you wish to change. example change "border-radius:4px" to "border-radius:0px"

section of code from select2.min.css below

.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051;}

After a quick look through the CSS I can see 11 "border-radius:4px" change each one to "border-radius:0px" or just change the ones to the areas you wish. check CSS file.

Regards

Ben