CSS 输入[日期] : How to remove gadgets

Question

我需要使用干净的 input[date] CSS。为此，我想知道如何删除或禁用以下元素:

1. 如何去除蓝色边框？
2. 如何防止单独编辑年、月、日？ (因此，没有蓝色背景框)
3. 如何去除十字？
4. 如何去掉双箭头？
5. 虽然我只想保留 triangle gadget 来选择 input[date] 末尾的日期，但我想知道如何删除它.

=== 解决方案 ===

1. 可以通过在 input 标记中使用 required="required" 参数来删除叉号。但它占据的空间还在。

Answer 1

你可以使用CSS来隐藏元素，但是为了防止个别编辑，你必须写一些脚本。然后放一个 onkeydown="return false" 就可以了 😎

/* To remove default blue outline */
input[type='date']:focus {
  outline: none;
}

/*  To remove cross sign */
input[type="date"]::-webkit-clear-button {
    display: none;
}

input[type="date"]::-ms-clear {
    display: none;
}

/* To remove Spin Arrows */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

/* To remove Drop down Arrow */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;  
}

<input type="date" onkeydown="return false"/>