Skip to content

Commit 25bdcbc

Browse files
author
Sahil
committed
Select2 Flat Ui Override CSS
1 parent 9d393b3 commit 25bdcbc

File tree

2 files changed

+127
-0
lines changed

2 files changed

+127
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea

‎Overide.css

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/*********************************
2+
Author : Techhysahil
3+
Link : http://techhysahil.com
4+
*********************************/
5+
6+
7+
/* Assign min-width to container */
8+
.select2-container{
9+
min-width:200px;
10+
}
11+
12+
.select2-container .select2-choice {
13+
border: 2px solid #dce4ec;
14+
height: 36px;
15+
border-radius: 0px ;
16+
font-family: "Lato", sans-serif;
17+
font-size: 14px;
18+
text-indent: 1px;
19+
-webkit-box-shadow: none;
20+
-moz-box-shadow: none;
21+
box-shadow: none;
22+
background-image: none;
23+
}
24+
.select2-container.select2-drop-above .select2-choice {
25+
border-bottom-color: #dce4ec;
26+
border-radius:0px;
27+
}
28+
.select2-drop {
29+
margin-top: -2px;
30+
border: 2px solid #dce4ec;
31+
border-top: 0;
32+
border-radius: 0px !important;
33+
-webkit-border-radius:0 0 6px 6px;
34+
-moz-border-radius:0 0 6px 6px;
35+
border-radius:0 0 6px 6px;
36+
-webkit-box-shadow: none;
37+
-moz-box-shadow: none;
38+
box-shadow: none;
39+
}
40+
.select2-drop.select2-drop-above {
41+
margin-top: 2px;
42+
border-top: 2px solid #dce4ec;
43+
border-bottom: 0;
44+
-webkit-border-radius: 6px 6px 0 0;
45+
-moz-border-radius: 6px 6px 0 0;
46+
border-radius: 6px 6px 0 0;
47+
-webkit-box-shadow: none;
48+
-moz-box-shadow: none;
49+
box-shadow: none;
50+
}
51+
.select2-container .select2-choice div {
52+
border-left: 2px solid #dce4ec;
53+
-webkit-border-radius: 0 4px 4px 0;
54+
-moz-border-radius: 0 4px 4px 0;
55+
border-radius: 0 4px 4px 0;
56+
57+
-webkit-background-clip: padding-box;
58+
-moz-background-clip: padding;
59+
background-clip: padding-box;
60+
}
61+
.select2-search{
62+
margin-top: 3px;
63+
}
64+
.select2-search input {
65+
height: 30px !important;
66+
border: 2px solid #dce4ec;
67+
}
68+
.select2-container-active .select2-choice,
69+
.select2-container-active .select2-choices {
70+
border: 2px solid #dce4ec;
71+
outline: none;
72+
73+
-webkit-box-shadow: none;
74+
-moz-box-shadow: none;
75+
box-shadow: none;
76+
}
77+
.select2-dropdown-open .select2-choice {
78+
-webkit-box-shadow: none;
79+
-moz-box-shadow: none;
80+
box-shadow: none;
81+
82+
-webkit-border-bottom-left-radius: 0;
83+
-moz-border-radius-bottomleft: 0;
84+
border-bottom-left-radius: 0;
85+
86+
-webkit-border-bottom-right-radius: 0;
87+
-moz-border-radius-bottomright: 0;
88+
border-bottom-right-radius: 0;
89+
}
90+
.select2-dropdown-open .select2-choice div {
91+
background: transparent;
92+
border-left: none;
93+
filter: none;
94+
}
95+
.select2-results .select2-highlighted {
96+
background: #3875d7;
97+
background: #1abc9c;
98+
color: #fff;
99+
border-radius: 0px;
100+
}
101+
.select2-results{
102+
padding: 0 0 0 0px;
103+
margin: 4px 0px 0px 0;
104+
}
105+
.select2-container-multi .select2-choices {
106+
height: auto !important;
107+
height: 1%;
108+
109+
border: 2px solid #dce4ec;
110+
}
111+
.select2-container-multi.select2-container-active .select2-choices {
112+
border: 2px solid #dce4ec;
113+
-webkit-border-radius: 6px;
114+
-moz-border-radius: 6px;
115+
border-radius: 6px;
116+
117+
-webkit-box-shadow: none;
118+
-moz-box-shadow: none;
119+
box-shadow: none;
120+
}
121+
.select2-container .select2-choice .select2-arrow{
122+
border: 0px;
123+
border-radius: 0px;
124+
background: transparent;
125+
background-image: none;
126+
}

0 commit comments

Comments
 (0)