css - 从 vuejs-datepicker 隐藏输入字段

Question

我在我的一个 vue 元素中使用 vuejs-datepicker。我想隐藏默认输入并在用户按下按钮时显示日历。我正在尝试拥有 <datepicker/>在 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>

但它没有按我的预期工作。 sample https://codesandbox.io/s/relaxed-sea-qfuix?file=/src/components/HelloWorld.vue:742-910

Answer 1

您需要使用the >>> combinator为了深入选择input标签:

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

这是因为您在样式标记上使用了 scoped 属性。 scoped 仅适用于将样式应用于当前 Vue 组件中直接引用的子组件。在这种情况下，日期选择器正在创建自己的子input，它不会受到样式的影响，除非您使用上面显示的深度选择器。