Joung Jiwon

css 수정

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.