title: How to change css style of input element of V-Calendar package?
body: <p>I need advice. I use <a href="https://github.com/nathanreyes/v-calendar" rel="nofollow noreferrer">V-Calendar</a> package where I want to customize style of <code>input</code> element. I use such code but this method yielded no results.</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-date-picker
          class='date-picker'
          mode='range'
          v-model='range'
          :show-day-popover=false
          is-double-paned
          show-caps&gt;
      &lt;/v-date-picker&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
      .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;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>The second question is how to remove this pointer:</p>
  
  <p><a href="https://i.stack.imgur.com/KnV0L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KnV0L.png" alt="enter image description here"></a></p>