如何从文本字段中删除此图标？（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

您需要在全局追加 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>

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

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

html

javascript

css

vue.js

vuetify.js

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

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

html

javascript

css

vue.js

vuetify.js

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