remove deep element
-
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 />
-
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
-
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
-
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
-
@zeppelinexpress
Maybe:.q-uploader >>> .q-uploader__header-content > a:first-child { display: none !important }
-
Thankssssssss very very much, solved!!!
-
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.