input type为date时，设置背景图片并隐藏小三角和小箭头

chrome正常版本下input为date的时候显示的input框是正常的。

（后面的小图标是设计图里面要求的，后面会说怎么让该图标不受小箭头影响）
但是在较低版本的chrome中会显示黑色的小箭头和小三角。

原本的操作是单独设置css小三角的样式背景图换成上面展示的

input[type="date"]::-webkit-calendar-picker-indicator {
    
    //这是控制小三角样式使用的
    width: 22px;
    height: 22px;
    background: url('../image/dateicon.png') no-repeat right center;
}

结果箭头样式并没有隐藏掉，而且还遮住了背景图

如果让小三角display:none，那么背景图没了，日期控件也直接无法使用了，所以小三角还必须存在
在和同事研究以后终于找到了解决办法，让小三角隐藏还能正常使用
首先小三角绝对不能display:none，那我们就想办法让他不显示啊，设置透明度是最好的办法。当我们给上述样式设置了opacity:0，小三角果然隐藏掉了，还不影响正常使用

但是，同样问题也来了，我的背景图也丢失了，很明显图片不能放在这里了，这时我们就要用到:after 选择器，把背景图放到这里来显示，同时需要设置一下定位，让背景图显示到小三角的下方，这样在展示背景的同时还能让小三角可以点击

input[type="date"]{
    
    
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    
    
    opacity:0;
    width: 45px;
    height: 35px;
    position: relative;
    z-index:1;//这里要大于背景图
}
input[type="date"]::after{
    
    
    content: '';
    position: absolute;
    right: 19px;
    top: 5px;
    width: 22px;
    height: 22px;
    background: url('../image/dateicon.png') no-repeat right center;
}

然后就大功告成了

至于前面那个小箭头，网上早给出了相关的方法

input[type="date"]::-webkit-inner-spin-button {
    
    
    visibility: hidden;
}

这样就完美展示了最初我们想要的状态
完整代码

input[type="date"]{
    
    
    position: relative;
    // 下面的样式根据自己需要设置
    width: 172px;
    height: 35px;
    padding-left: 14px;
    border: 1px solid #b2d9f4;
    outline: none;
    vertical-align: top;
    background-color: #f7fbfe;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    
    
    opacity:0;
    width: 45px;
    height: 35px;
    position: relative;
    z-index:1;
}
input[type="date"]::after{
    
    
    content: '';
    position: absolute;
    right: 19px;
    top: 5px;
    width: 22px;
    height: 22px;
    background: url('../image/dateicon.png') no-repeat right center;
}
input[type="date"]::-webkit-inner-spin-button {
    
    
    visibility: hidden;
}

tip:type=date是需要浏览器支持的，他们的日期组件各不相同，而且ie不支持，如果要用ie就找支持的组件