css - 时间字段的webkit css伪元素

Question

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

PS我已经试过了

::-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;
}

score 10 · Accepted Answer

那将是::-webkit-clear-button

所以使用

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

要找到这样的东西，您可以从控制台选项中启用Show Shadow DOM ，在Elements下。

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

score 3 · Accepted Answer

我知道 Internet Explorer 10 支持带有::-ms-clear.
所以我在 Chromium 的源代码中搜索“webkit-clear”并发现::-webkit-clear-button.

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

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

2 回答 2