Use pseudo classes for selecting webkit pseudo elements Use pseudo classes for selecting webkit pseudo elements google-chrome google-chrome

Use pseudo classes for selecting webkit pseudo elements


It's complete hack time !!!

For a real solution, pass your way. But anyway playing with vendor-specific pseudo-element means you're open to hacks, aren't you ?

There unfortunately doesn't seem to be any way to combine pseudo-selectors on pseudo-elements.But while trying out some things and others, I ended up with this awful hack :

The element before this second : can be targeted. So we can place on top of the real target, with an white background, and pretend that this : doesn't exist.

input::-webkit-datetime-edit-fields-wrapper {    position: relative;}input::-webkit-datetime-edit-text {    position: relative;    z-index: 0;    padding-right: 4px;}input::-webkit-datetime-edit-minute-field {    background: white;    z-index: 4;    display: inline-block;    width: 10px;    height: 12px;    position: absolute;    top: 0;    margin-left: -4px;}
<input type=time step="1" value="00:00:00">