如何显示Bootstrap输入日期字段的完整字段？

Question

当我使用Boostrap创建宽度有限的日期input字段时

<input type="date" id="my_date" name="my_date" class="form-control" style="width:80px">

当场被聚焦时，控制图标覆盖值（或占位符）;精细。但是当场不聚焦时，如果聚焦占据空白区域，则放置控制图标的位置。

是否有解决方法，以便该字段显示完整内容（如果没有聚焦？

）

Answer 1

试试这段代码。当您悬停时，会显示按钮。如果文本仍然隐藏，请尝试制作较小的字体或较少的填充。

<强> CSS

#my_date::-webkit-inner-spin-button {
  -webkit-appearance: none; 
  display: none;
}
#my_date:hover::-webkit-inner-spin-button {
  display: block;
}