如何去除 input[type=time] 表单的大叉？

Question

需求描述

• 想要让用户输入一个时间。
• 想用 input[type=time] 实现。
• 这个表单只要输入了内容，并且鼠标在此表单上，表单右侧就会显示一个叉，如下图
• 
• 不希望出现这个叉！
• 希望能用 CSS 实现，且不希望用遮挡的方法实现。

---

code

• CSS 代码

  /* 去除默认样式，目的是去除上下箭头 */
  input[type=time]::-webkit-outer-spin-button,input[type=time]::-webkit-inner-spin-button
  {
      -webkit-appearance: none !important;
  }
  
  /* 别人提供的方法，不见效。推测原因是此方法仅适用于 input[type=search] */
  input[type=time]::-webkit-search-cancel-button
  {
      display: none;
  }
  
  /* 可行的方法，但只能用于 IE */
  input[type=time]::-ms-clear
  {
      display: none;
  }

• HTML 代码（其实没什么特殊的）

  <input type='time'>

---

• 求大佬帮助！

Answer 1

input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
    opacity: 0;
}

Answer 2

很简单。

input[type="time"]{
  width:120px;
  border: none;
  clip-path: inset(0 17px 0 0);
  outline:none;
  outline:0;
}
<input type="time" required/>