Html 如何更改输入类型日期的日历图标？

我想知道如何在不使用jquery的情况下更改日历徽标

我希望它看起来像图片中的：

输入
{
宽度：50%；
填充：8px；
边界半径：10px；
利润底部：5%；
边框：1px实心#中交；
字体大小：13px；
}
.fecha输入[type=“date”]：：-webkit日历选择器指示器
{
颜色：rgba（0,0,0,0）；
不透明度：1；
背景图像：url（“../../some folder/some file.svg”）；
背景重复：无重复；
背景位置：100%居中；
背景尺寸：20px；
光标：指针；
}

---

这个怎么样？我用了一张从谷歌搜索得到的图片，你显然会用你的图片。我完全将图像定位在文本输入的右侧。当输入变为type=“date”时，它将消失

输入{
宽度：50%；
填充：8px；
边界半径：10px；
利润底部：5%；
边框：1px实心#中交；
字体大小：13px；
}
.fecha输入[type=“date”]：：-webkit日历选择器指示器{
颜色：rgba（0,0,0,0）；
位置：相对位置；
不透明度：1；
光标：指针；
}
.日历{
位置：绝对位置；
右：50%；
顶部：12px；
}
输入[type=“date”]+日历{
显示：无；
}

用于包装搜索框的

/*样式*/
梅因先生{
宽度：50%；
保证金：50px自动；
}
/*带搜索图标的引导4文本输入*/
.has search.form控件{
左侧填充：2.375雷姆；
}
.有搜索。表单控制反馈{
位置：绝对位置；
z指数：2；
显示：块；
宽度：2.375雷姆；
高度：2.375雷姆；
线高：2.375雷姆；
文本对齐：居中；
指针事件：无；
颜色：#000；
}

你好，世界！


其他方法不使用css

哪个图标？我们无法在您发布的代码示例中看到该图标。它非常接近，但。。。我希望它在任何时候都能被看到，箭头也会消失。你知道怎么做吗？听起来你不想使用日期选择器。您是否考虑过使用带掩码的文本输入和/或JS输入验证？不，我没有考虑过，您知道如何执行吗？您到底想要什么？将您的问题更改为描述您想要的确切功能。它看起来很棒，谢谢，但我不知道如何通过输入type=“date”实现这种风格。当点击图标时，会出现一个日历，并选择日期。你知道我怎么做吗？