Webkit CSS Pseudo Elements for Time Field

webkit css pseudo elements for time field

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..

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">

Webkit Pseudo Elements Documentation

There is no specific documentation for pseudo-elements, but I finally could find, while tinkering on the Chrome Dev Tools' preferences a setting that shows the "Shadow-Dom" from the user-agent.

Go to "Preferences" and scroll to the "Elements" section, where there is a oprtion for that:

shadow-dom option for google chrome

Can I use a :before or :after pseudo-element on an input field?

:after and :before are not supported in Internet Explorer 7 and under, on any elements.

It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.

In other words it's impossible with pure CSS.

However if using jquery you can use

$(".mystyle").after("add your smiley here");

API docs on .after

To append your content with javascript. This will work across all browsers.

Which elements support the ::before and ::after pseudo-elements?

As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.

How can I target Google Chrome's webkit-datetime-edit-year-field on a disabled input using css?

Try this. If the field is disabled it doesn't matter the range.

input[type='date']:disabled::-webkit-datetime-edit-year-field {
color: transparent;
}

problem with select and :after with CSS in WebKit

I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.



Related Topics



Leave a reply



Submit