Css 从vuejs日期选择器隐藏输入字段

我正在我的一个vue项目中使用vuejs日期选择器。我想在用户按下按钮时隐藏默认输入并显示日历。我正在尝试让div中的

为div应用css，以便隐藏它

<div class="datePickerDiv">
   <datepicker class="date" ref="datepick"></datepicker>
</div>

<style scoped>
.datePickerDiv {
  position: relative;
  float: left;
  margin-top: -40px;
}
.datePickerDiv input {
  border: none;
  background: transparent;
}
</style>

datePickerDiv先生{
位置：相对位置；
浮动：左；
利润上限：-40px；
}
.datePickerDiv输入{
边界：无；
背景：透明；
}

但它并没有像我预期的那样起作用。示例

您需要使用，以便深入选择

输入

标记：

.datePickerDiv >>> input {
  border: none;
  background: transparent;
}

---

这是因为您在样式标记上使用了

作用域

属性<代码>作用域仅适用于将样式应用于当前Vue组件中直接引用的子组件。在这种情况下，datepicker正在创建它自己的子

输入

，它将不受样式的影响，除非您使用上面显示的深度选择器。

使用类隐藏输入添加属性输入类。这将对输入元素应用隐藏输入类。了解更多有关道具的信息

。隐藏输入{
显示：无！重要；
}