UNPKG

4.53 kBCSSView Raw
1/**
2 * @author zhixin wen <wenzhixin2010@gmail.com>
3 */
4.ms-parent {
5 display: inline-block;
6 position: relative;
7 vertical-align: middle;
8}
9
10.ms-choice {
11 display: block;
12 width: 100%;
13 height: 26px;
14 padding: 0;
15 overflow: hidden;
16 cursor: pointer;
17 border: 1px solid #aaa;
18 text-align: left;
19 white-space: nowrap;
20 line-height: 26px;
21 color: #444;
22 text-decoration: none;
23 -webkit-border-radius: 4px;
24 -moz-border-radius: 4px;
25 border-radius: 4px;
26 background-color: #fff;
27}
28.ms-choice.disabled {
29 background-color: #f4f4f4;
30 background-image: none;
31 border: 1px solid #ddd;
32 cursor: default;
33}
34.ms-choice > span {
35 position: absolute;
36 top: 0;
37 left: 0;
38 right: 20px;
39 white-space: nowrap;
40 overflow: hidden;
41 text-overflow: ellipsis;
42 display: block;
43 padding-left: 8px;
44}
45.ms-choice > span.placeholder {
46 color: #999;
47}
48.ms-choice > div {
49 position: absolute;
50 top: 0;
51 right: 0;
52 width: 20px;
53 height: 25px;
54 background: url("multiple-select.png") left top no-repeat;
55}
56.ms-choice > div.open {
57 background-position: right top;
58}
59
60.ms-drop {
61 width: 100%;
62 overflow: hidden;
63 display: none;
64 margin-top: -1px;
65 padding: 0;
66 position: absolute;
67 z-index: 1000;
68 background: #fff;
69 color: #000;
70 border: 1px solid #aaa;
71 -webkit-border-radius: 4px;
72 -moz-border-radius: 4px;
73 border-radius: 4px;
74}
75.ms-drop.bottom {
76 top: 100%;
77 -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
78 -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
79 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
80}
81.ms-drop.top {
82 bottom: 100%;
83 -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
84 -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
85 box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
86}
87
88.ms-search {
89 display: inline-block;
90 margin: 0;
91 min-height: 26px;
92 padding: 4px;
93 position: relative;
94 white-space: nowrap;
95 width: 100%;
96 z-index: 10000;
97 -webkit-box-sizing: border-box;
98 -khtml-box-sizing: border-box;
99 -moz-box-sizing: border-box;
100 -ms-box-sizing: border-box;
101 box-sizing: border-box;
102}
103.ms-search input {
104 width: 100%;
105 height: auto !important;
106 min-height: 24px;
107 padding: 0 20px 0 5px;
108 margin: 0;
109 outline: 0;
110 font-family: sans-serif;
111 border: 1px solid #aaa;
112 -webkit-border-radius: 0;
113 -moz-border-radius: 0;
114 border-radius: 0;
115 -webkit-box-shadow: none;
116 -moz-box-shadow: none;
117 box-shadow: none;
118 background: #fff url("multiple-select.png") no-repeat 100% -22px;
119 background: url("multiple-select.png") no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
120 background: url("multiple-select.png") no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
121 background: url("multiple-select.png") no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
122 background: url("multiple-select.png") no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
123 background: url("multiple-select.png") no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
124 background: url("multiple-select.png") no-repeat 100% -22px, linear-gradient(to bottom, #ffffff 85%, #eeeeee 99%);
125 -webkit-box-sizing: border-box;
126 -khtml-box-sizing: border-box;
127 -moz-box-sizing: border-box;
128 -ms-box-sizing: border-box;
129 box-sizing: border-box;
130}
131
132.ms-drop ul {
133 overflow: auto;
134 margin: 0;
135 padding: 5px 0;
136}
137.ms-drop ul > li {
138 list-style: none;
139 display: list-item;
140 background-image: none;
141 position: static;
142 padding: 0 8px;
143}
144.ms-drop ul > li .disabled {
145 opacity: 0.35;
146 filter: Alpha(Opacity=35);
147}
148.ms-drop ul > li.multiple {
149 display: block;
150 float: left;
151}
152.ms-drop ul > li.group {
153 clear: both;
154}
155.ms-drop ul > li.multiple label {
156 width: 100%;
157 display: block;
158 white-space: nowrap;
159 overflow: hidden;
160 text-overflow: ellipsis;
161}
162.ms-drop ul > li label {
163 font-weight: normal;
164 display: block;
165 white-space: nowrap;
166 cursor: pointer;
167}
168.ms-drop ul > li label.optgroup {
169 font-weight: bold;
170}
171.ms-drop ul > li.hide-radio:focus, .ms-drop ul > li.hide-radio:hover {
172 background-color: #f8f9fa;
173}
174.ms-drop ul > li.hide-radio.selected {
175 color: #fff;
176 background-color: #007bff;
177}
178.ms-drop ul > li.hide-radio label {
179 margin-bottom: 0;
180 padding: 5px 0;
181}
182.ms-drop ul > li.hide-radio input {
183 display: none;
184}
185.ms-drop input[type=radio], .ms-drop input[type=checkbox] {
186 margin: 5px;
187}
188.ms-drop .ms-no-results {
189 display: none;
190}
191
192/*# sourceMappingURL=multiple-select.css.map */