Css “如何设置输入类型的样式”；时间“；

我试图找到一个源代码来解释如何完全设置输入类型“time”的样式。我找不到一个例子来解释所有的样式属性

我发现的唯一一个是：

input[type="time"]{
    /**style goes here **/
}

这帮不了什么忙

我试过这个：

input[type="time"]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display: block;
    width:20px;
    color: red;
    text-align:center;
    position:relative;
} 

---

例如，Spinner不会变为红色。

我在Chrome/webkit中对输入进行了一些样式设置，但我不知道如何在Firefox中设置任何样式。这是我放在代码笔上的一个

输入[类型=时间]{
边界：无；
颜色：#2a2c2d；
字体大小：14px；
字体系列：helvetica；
宽度：180px；
}
/*包装小时、分钟、秒和am/pm字段以及
上下按钮和“X”按钮*/
输入[type=time]：-webkit日期时间编辑字段包装器{
显示器：flex；
}
/*字段之间的空间-小时和分钟之间，分钟和分钟之间
第二、第二和上午/下午*/
输入[类型=时间]：-webkit日期时间编辑文本{
填充：19px 4px；
}
/*小时、分钟、秒和am/pm字段的命名约定为
`-webkit日期时间编辑-{field}-field`*/
/*时辰*/
输入[类型=时间]：-webkit日期时间编辑小时字段{
背景色：#f2f4；
边界半径：15%；
填充：19px 13px；
}
/*分钟*/
输入[类型=时间]：-webkit日期时间编辑分钟字段{
背景色：#f2f4；
边界半径：15%；
填充：19px 13px；
}
/*上午/下午*/
输入[类型=时间]：-webkit日期时间编辑ampm字段{
背景色：#7155d3；
边界半径：15%；
颜色：#fff；
填充：19px 13px；
}
/*用于重置/清除时间的“X”按钮*/
输入[类型=时间]：-webkit清除按钮{
显示：无；
}
/*用于递增/递减值的上/下箭头*/
输入[类型=时间]：-webkit内部旋转按钮{
显示：无；
}

---

还有另一个伪元素：

-webkit日历选择器指示器

-在chrome中显示的时钟，允许您使用鼠标拾取时间

input[type=“time”]：：-webkit日历选择器指示器{
过滤器：反转（0.5）深褐色（1）饱和（5）色调旋转（175度）；
}

---

要设置输入类型的样式，请使用以下css-

[type="date"] {
  background:transparent url(/assets/images/calendar.png)  97% 50% no-repeat !important;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
[type="time"] {
  background:transparent url(/assets/images/clock.png)  97% 50% no-repeat !important;
}
[type="time"]::-webkit-inner-spin-button {
  display: none;
}
[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

---

如果你正在寻找一个主题之外的资源。相反，请解释您正在尝试的样式、您尝试了什么以及哪些不起作用。@j08691我什么都不能尝试，因为我不知道从哪里开始！（我想用按钮、鼠标悬停、点击、微调器、清除按钮等来设置所有样式）我认为这样的元素（如选择元素）并不意味着要设置样式，而是由浏览器来处理。我如何创建这些元素，但要创建图标黑色和图标白色的背景