Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the default border radius ,Select2

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

like image 285
JaskeyLam Avatar asked Apr 29 '15 12:04

JaskeyLam


People also ask

How to remove the border radius of a select element?

Method 1: Using CSS: Use some CSS property to remove the border radius. Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> component.

How to remove border radius from select tag using bootstrap?

We can remove border radius from Select tag by two methods as follows: Method 1: Using CSS: Use some CSS property to remove the border radius. Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> component. Custom select menus require as it were a custom class, ...

How do I change the radius of a border in CSS?

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" 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.

How to add a border around the corner of a select?

Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> component. Custom select menus require as it were a custom class, .custom-select to trigger the custom styles.


Video Answer


1 Answers

You can add this css :

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

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

like image 85
BENARD Patrick Avatar answered Oct 08 '22 07:10

BENARD Patrick