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:
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
Looking to Use Pseudo Elements to Create a Triangle
Slide Flickering with CSS Transitions
Absolutely Positioned Flexbox Doesn't Expand to Fit Contents
How to Use Calc() Inside Another Function
Adding New Theme to ASP.NET MVC 5 Dont Work
How to Add Focus to a Table Row <Tr>
Sass 3.2 Media Queries and Internet Explorer Support
How to Strongly Force Line-Height in CSS, with No Stretches
How to Test CSS Properties for a React Component Using React-Testing-Library
Fieldset Contents Overflow in Firefox
Padding Between Checkbox and Label
Twitter Bootstrap Grid Vertical Align Bottom
Bootstrap 3 Navbar-Right No Padding with Navbar-Fixed-Top
Rem Font Size Not Adjusting Below Arbitrary Threshold
Align Text with Bottom as It Comes in During a Chat
How to Hide or Show Content with CSS Depending on Screen Size