[vuetifyjs] v-select 높이, 화살표 변경

v-select

https://vuetifyjs.com/en/components/selects/

 

vuetify를 쓰면서 

selectbox를 변경하는게 가장 어려웠던거 같다...

 

아래의 코드를 global css 에 적용하고 높이와 색상을 조절하면 편리하다. 

    .v-select {
        flex: none; // 기본 값이 1로 되어 있어서 width를 줘도 먹지 않을 수 있다. 

        .v-input__control {
            height: 33px; // 내가 원하는 높이
            width: inherit;

            .v-input__slot {
                min-height: initial !important;
                width: inherit;
                margin: 0;
            }

            .v-select__slot {
                height: 33px; // 내가 원하는 높이

                .v-input__append-inner {
                    margin-top: 5px; // 뒤에 화살표 
                }
            }
        }

        .v-select__selections {
            padding: 0 !important;
        }

        .mdi-menu-down::before {
            color: #FBC820;	// 화살표 색상
            content: "\F0140"; // 원하는 화살표 모양
        }
    }

 

화살표 모양이 mdi-menu-down::befored의 contenxt 값으로

"\F035D" 를 default로 사용하고 있는데 

해당 content의 unicode를 찾는데 엄청 많이 헤멨다...

 

검색할때는 "f35d"로 검색 

해당 content에 사용된 코드 값은 유니코드나 uft-8, utf-32와는 다른 material-icon code 인것 같다. 

유니코드를 직접 적용하면 이상한 값이 나온다.

 

참고용 mdi-icon 사이트 

https://pictogrammers.github.io/@mdi/font/2.0.46/