如何从文本字段中删除此图标？（Vuetifyjs，CSS）

【问题标题】：How can I remove this icon from text field? (Vuetifyjs, CSS)如何从文本字段中删除此图标？（Vuetifyjs，CSS）
【发布时间】：2023-04-04 00:40:01
【问题描述】：

我有这个 vuetifyjs 文本字段，我想删除时钟图标。
<v-text-field
v-model="model.end_time"
type="time">
</v-text-field>

我已经尝试过这段代码，但它不起作用

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

谁能帮我解决这个问题

【问题讨论】：

标签： javascript html css vue.js vuetify.js

【解决方案1】：

您需要全局附加 css 代码。如果您在<style scoped> 中添加 css，它将无法正常工作。

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>

【讨论】：