如何更改 V-Calendar 包的输入元素的 css 样式？答案

【问题标题】：How to change css style of input element of V-Calendar package?如何更改 V-Calendar 包的输入元素的 css 样式？
【发布时间】：2018-12-13 03:37:52
【问题描述】：

我需要建议。我使用V-Calendar 包来自定义input 元素的样式。我使用这样的代码，但这种方法没有产生任何结果。

<template>
    <v-date-picker
        class='date-picker'
        mode='range'
        v-model='range'
        :show-day-popover=false
        is-double-paned
        show-caps>
    </v-date-picker>
</template>

<style scoped>
    .date-picker input{
        display: block !important;
        width: 100% !important;
        color: #495057 !important;
        background-color: #fff !important;
        background-clip: padding-box !important;
        border: 1px solid #ced4da !important;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
        padding: .25rem .5rem !important;
        font-size: .875rem !important;
        line-height: 1.5 !important;
        border-radius: .2rem !important;
    }
</style>

第二个问题是如何去掉这个指针：

【问题讨论】：

标签： javascript css vue.js

【解决方案1】：

你使用 scoped 做 css，我建议你使用深度选择器

.date-picker /deep/ input {
    display: block !important;
    width: 100% !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    border-radius: .2rem !important;
}

Deep selector reference

【讨论】：

谢谢！你对我的第二个问题有什么建议？
对不起，我不太明白你的第二个问题。你能解释得更详细些吗？
我想删除箭头 (^) 。在帖子中，您可以注意到底部的小图片。
好吧，我终于找到了第二个问题的解决方案：.popover-content:after{content: none !important;}

【解决方案2】：

您需要调整.direction-* 类，尤其是边框。检查悬停事件，您可以看到它插入了一个具有 .direction-* 类的元素 -- * 含义：上、左、右等。 Here's 来自源的链接，看看它是如何根据popover 所在的位置添加一些像素的。

首先，尝试一些!important 规则，直到找到正确的解决方法。您也可以重新编译文件以满足您的需要。不要忘记来自.popover-* 类的borders，也位于链接中。

看起来事件添加了内联代码，所以可能有问题。

【讨论】：