Search code examples
csswebkitpseudo-element

webkit css pseudo elements for time field


I've found an interesting post about webkit pseudo elements for inputs here, so I was going to remove the cancel button from input type="time". But by murthy's law exactly this pseudo element is not described anywhere.

P.S. I already tryed

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

Of course there is a way to do this with :after element, but I don't believe there is no pseudo element for this

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

Solution

  • That would be ::-webkit-clear-button

    So use

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

    To find such things you can enable Show Shadow DOM from the console options, under Elements.

    This way when you select the input element, you can open it and look under the hood..