Showing
3 changed files
with
77 additions
and
3 deletions
This diff could not be displayed because it is too large.
... | @@ -17,7 +17,8 @@ body { | ... | @@ -17,7 +17,8 @@ body { |
17 | margin: 0; | 17 | margin: 0; |
18 | padding: 0; | 18 | padding: 0; |
19 | overflow-x: hidden; | 19 | overflow-x: hidden; |
20 | - font-family:'NanumBarunGothic' | 20 | + font-family:'NanumBarunGothic'; |
21 | + min-width: 1200px; | ||
21 | } | 22 | } |
22 | a { | 23 | a { |
23 | transition: all 0.3s ease; | 24 | transition: all 0.3s ease; |
... | @@ -230,6 +231,78 @@ a:focus { | ... | @@ -230,6 +231,78 @@ a:focus { |
230 | background: white; | 231 | background: white; |
231 | } | 232 | } |
232 | 233 | ||
234 | +/* Dropdown list*/ | ||
235 | +select{ | ||
236 | + -webkit-appearance: none; /* 네이티브 외형 감추기 */ | ||
237 | + -moz-appearance: none; | ||
238 | + appearance: none; | ||
239 | + display:none; | ||
240 | +} | ||
241 | + | ||
242 | +select::-ms-expand { | ||
243 | + display: none; | ||
244 | +} | ||
245 | + | ||
246 | +.custom-select { | ||
247 | + position: relative; | ||
248 | + font-family: Arial; | ||
249 | +} | ||
250 | + | ||
251 | +.custom-select select { | ||
252 | + display: none; /*hide original SELECT element:*/ | ||
253 | +} | ||
254 | + | ||
255 | +.select-selected { | ||
256 | + background-color: white; | ||
257 | +} | ||
258 | + | ||
259 | +/*style the arrow inside the select element:*/ | ||
260 | +.select-selected:after { | ||
261 | + position: absolute; | ||
262 | + content: ""; | ||
263 | + top: 14px; | ||
264 | + right: 10px; | ||
265 | + width: 0; | ||
266 | + height: 0; | ||
267 | + border: 6px solid transparent; | ||
268 | + border-color: #fff transparent transparent transparent; | ||
269 | +} | ||
270 | + | ||
271 | +/*point the arrow upwards when the select box is open (active):*/ | ||
272 | +.select-selected.select-arrow-active:after { | ||
273 | + border-color: transparent transparent #fff transparent; | ||
274 | + top: 7px; | ||
275 | +} | ||
276 | + | ||
277 | +/*style the items (options), including the selected item:*/ | ||
278 | +.select-items div,.select-selected { | ||
279 | + color: #333; font-size:15px; | ||
280 | + text-align: center; | ||
281 | + border: 1px solid transparent; | ||
282 | + border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; | ||
283 | + cursor: pointer; | ||
284 | + user-select: none; | ||
285 | +} | ||
286 | + | ||
287 | +/*style items (options):*/ | ||
288 | +.select-items { | ||
289 | + position: absolute; | ||
290 | + background-color:white; | ||
291 | + top: 100%; | ||
292 | + left: 0; | ||
293 | + right: 0; | ||
294 | + z-index: 99; | ||
295 | +} | ||
296 | + | ||
297 | +/*hide the items when the select box is closed:*/ | ||
298 | +.select-hide { | ||
299 | + display: none; | ||
300 | +} | ||
301 | + | ||
302 | +.select-items div:hover, .same-as-selected { | ||
303 | + background-color: rgba(0, 0, 0, 0.1); | ||
304 | +} | ||
305 | + | ||
233 | /* Introduction */ | 306 | /* Introduction */ |
234 | 307 | ||
235 | .tm-section-title { | 308 | .tm-section-title { |
... | @@ -298,7 +371,7 @@ a:focus { | ... | @@ -298,7 +371,7 @@ a:focus { |
298 | select::-ms-expand { | 371 | select::-ms-expand { |
299 | display: none; | 372 | display: none; |
300 | } | 373 | } |
301 | -출처: https://doolyit.tistory.com/126 [동해둘리의 IT Study] | 374 | + |
302 | input{ | 375 | input{ |
303 | border-radius:5px; | 376 | border-radius:5px; |
304 | } | 377 | } |
... | @@ -308,7 +381,8 @@ input{ | ... | @@ -308,7 +381,8 @@ input{ |
308 | left:44%; | 381 | left:44%; |
309 | margin-top:40px; | 382 | margin-top:40px; |
310 | border:none; | 383 | border:none; |
311 | - border-radius:5px; | 384 | + border-radius:5px; |
385 | + color : -internal-light-dark(black, white); | ||
312 | } | 386 | } |
313 | 387 | ||
314 | #map-answer{ | 388 | #map-answer{ | ... | ... |
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment