时间字段的webkit css伪元素答案

【问题标题】：webkit css pseudo elements for time field时间字段的webkit css伪元素
【发布时间】：2013-06-24 18:30:02
【问题描述】：

我发现了一篇关于用于输入 here 的 webkit 伪元素的有趣帖子，因此我需要从 input type="time" 中删除取消按钮，但根据穆尔蒂定律，这个伪元素在任何地方都没有描述。如果有人知道请发给我。

附：我已经试过了

::-webkit-search-cancel-button
::-webkit-input-cancel-button 
::-webkit-time-cancel-button
::-webkit-time-cancel-button

当然有一种方法可以用:after 元素来做到这一点，但我不相信这个没有伪元素

input[type="time"]::after
{
    content: "";
    background: #FFF;
    height: 20px;
    width: 10px;
    position: absolute;
    margin: 0 -10px;
}

【问题讨论】：

【解决方案1】：

我知道 Internet Explorer 10 支持 ::-ms-clear 这样的伪元素。
所以我在 Chromium 的源代码中searched 为“webkit-clear”发现了::-webkit-clear-button 的存在。

This JSFiddle 表明::-webkit-clear-button 伪元素具有预期的效果。

input[type="time"]::-webkit-clear-button {
    display: none;
}

【讨论】：

【解决方案2】：

那就是::-webkit-clear-button

所以用

input[type="time"]::-webkit-clear-button{
    display:none;
}

要查找此类内容，您可以在 Elements 下的控制台选项中启用 Show Shadow DOM。

这样，当您选择input 元素时，您可以打开它并查看引擎盖下的内容..

【讨论】：