How can I remove this icon from text field? (Vuetifyjs, CSS)

I have this vuetifyjs text field and I want to remove the clock icon.
<v-text-field
v-model="model.end_time"
type="time">
</v-text-field>

I have already tried this code but it is not working

input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
  display:none;
}

Can someone help me with this

Answer

You need append css code globally. If you add css in <style scoped> it will be not working.

import { createApp } from 'vue'

Vue.use(Vuetify);

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<style>
  input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
}
</style>
<div id="app">
<br>
<br>
   <v-text-field
        value="12:30:00"
        type="time"
      ></v-text-field>
</div>

<script>
new Vue({
  el: "#app",
  data: {
   count: 1
  }
});

</script>

Advertisement

Answer