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

Question

我有这个 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;
}

有人可以帮我弄这个吗

Answer 1

您需要全球 append 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>