remove deep element

zeppelinexpress

I’m trying to remove an icon of q-uploader

I’ve already read the docs and did not found a prop,
I’m trying scoped unsuccessfully

<style scoped>
  .q-uploader i {
    display: none !important;
  }
  .q-uploader a {
    display: none !important;
  }
</style>

      <q-uploader
        class="q-ma-md"
        style="max-width: 300px"
        method="POST"
        url="http://localhost:3333/upload"
        label="Add pic"
        accept=".jpg, image/*"
        @rejected="onRejected"
        field-name="profile_pic"
        hide-upload-btn
      />

beets

Try


<style scoped>
  .q-uploader >>> i {
    display: none !important;
  }
  .q-uploader >>> a {
    display: none !important;
  }
</style>

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

zeppelinexpress

this worked but removed the add button too,
well, but I learned how to use scoped correctly
I will try another ways using “>>>”

thank you very much twice, saved me two times today

zeppelinexpress

there is 2 icons, “add_box” and when u add something, there is an icon “clear_all”, I want to find a way to remove only “clear_all” icon, but on browser inspector, I did not found a class different between these two icons

beets

@zeppelinexpress
Maybe:

.q-uploader >>> .q-uploader__header-content > a:first-child {
  display: none !important
}

zeppelinexpress

Thankssssssss very very much, solved!!!

Arkshine

As side-note, you can also do it without CSS – that’s something you could achieve with slots: https://quasar.dev/vue-components/uploader#Slots by customizing the header.
More verbose though, but I guess cleaner in a way.