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 ?

Fiendish

Have you ever try something to make the job ? – Soy

Look for border-top-left-radius, border-bottom-left-radius and border-top-right-radius CSS rules and fix accordingly. – Psychosomatics

Answer 1

You can add this css :

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

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

Soy

this also works in css & scss – Garica

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')

Andee

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;
}

Broadbrim

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>

Cobbler

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

Anjelicaanjou

Probably don't want to manipulate the original css files themselves, as that would affect all future behavior. I would recommend using either additional css commands afterwards or modifying the DOM via javascript after the page loads. – Northernmost