q-input 컴포넌트 질문

クエサー（Quasar）完璧マスター：Vueフロントウェブをすばやく作成したい場合（Based Vue3）

作成

453

q-input태그에서 약간의 굴곡을 적용하고싶은데 style을 따로 정의하여도 적용되지 않던데 다른 방법이 있을까요?

<template>
  <q-page>
    <q-input
      label="Your Label"
      outlined
      class="rounded-input"
    />
  </q-page>
</template>

<style scoped>
.rounded-input {
  border-radius: 10px; 
}
</style>

vue.jsquasar

回答 1

gymcoding

インストラクター

안녕하세요 🙂

개발자도구에서 디버깅을 해보시면 실제 border-radius 를 담당하고 있는 요소는 파랑색 네모 박스로 체크한 요소인걸 확인할 수 있습니다. (스크린샷 참고)
하지만 수강생 분이 스타일을 위해 class를 적용한건 노랑색 박스이지요?
만약 변경하시려면 파랑색 박스로 감싼 요소를 변경해야 합니다.

<template>
<q-page>
    <q-input
    v-model="model"
    label="Your Label"
    outlined
    class="rounded-input"
    />
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const model = ref('');

</script>
<style>
.rounded-input.q-field--outlined .q-field__control {
    border-radius: 30px; 
}
</style>

alrax3574

質問者

왜 적용이 안되나 답답했는데 감사합니다!

Inflearn コミュニティ Q&A

q-input 컴포넌트 질문