css - Bootstrap 4 日期输入以显示日历图标

Question

我不喜欢 Bootstrap 4 中日期输入的样子。现在它有两种状态，当你将鼠标悬停在它上面时，它会显示 3 个箭头。其中一个箭头是打开日历。

我想用一个日历图标（update1：​​但日历应该是可点击的）来替换它们，如下图所示。

更新2 ： https : //jsfiddle.net/wxeg4vk7/

<input type="date" class="form-control" id="pickupdate">

我怎样才能做到这一点？

谢谢！

标签： cssbootstrap-4

Answer 1

首先，隐藏默认的 html5 日期微调器。然后自定义日期选择器指示器的颜色和位置...

.form-control[type=date]::-webkit-inner-spin-button, 
.form-control[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}   

input[type=date]::-webkit-calendar-picker-indicator {
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    z-index: -1;
    position: relative;
    transform: translateX(16px);
}

最后，使用input-group...

<div class="input-group">
   <input class="form-control py-2 border-right-0 border" type="date">
   <span class="input-group-append ml-n1">
     <div class="input-group-text bg-transparent"><i class="fa fa-calendar-alt"></i></div>
   </span>
</div>

https://codeply.com/p/22Kp9X4CAD