Disable webkit's input mask with input type=“time”?

webkit css
webkit-appearance: button
webkit css for all browsers
css appearance w3school
webkit-appearance checkbox
webkit-appearance block
webkit-appearance for ie
webkit decoration

I want to remove all the webkit stuff (chrome) associated with the type time. I don't want to change the type.

<input type="time">


I have found similar questions removing the webkit stuff.

Can I hide the HTML5 number input’s spin box?


Update: Chrome


As you can see chrome breaks its.

Try this:

::-webkit-datetime-edit-text {
  color: transparent;

appearance, To remove platform specific styling to an element that does have it by default. For instance, inputs with a type=search in WebKit browsers by  I'm trying to build a Chrome extension that will automatically disable the webkit-text-size-adjust CSS rule on LinkedIn. This is so I can get the text to zoom when I zoom on the page. Using Chrom

input[type=time]::-webkit-inner-spin-button {


appearance (-moz-appearance, -webkit-appearance), The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating  10 Responses to “How to disable CSS transforms, transistions and animations” Ito Says: January 22nd, 2014 at 3:36 pm. Thanks so much. It worked nicely for me. I was desperated looking for where I had to disable this “animations”, like as where is wally. Adriano Says: June 25th, 2014 at 9:54 pm. Tnks a lot! This code help me 😀

try this

input[type=time]::-webkit-inner-spin-button {
    -webkit-appearance: none;

input[type=time] {

What is WebKit and how is it related to CSS?, -based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Incase you want your input to remain visible when valid but not in focus

input:not( :focus ) {
  color: transparent;
input:valid {
  color: inherit;

CSS3 Webkit, first important to have a working knowledge of web browser engines. The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme.. The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing.

What are -moz- and -webkit-?, for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3. WebKit implements a similar property, but with different values: -webkit-font-smoothing. It only works on Mac OS X/macOS. It only works on Mac OS X/macOS. auto - Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)

How to override -webkit-appearance - css - html, { -webkit-appearance: none; } If I open up Chrome developer tools and uncheck that properties things look ok. How would I override this property in the CSS? Mac OS 10.6.5 , Safari 5.0.3, Same issue with WebKit. EDIT: Just for completeness, I just reset Safari. Behold! All my history appears to be gone, and yet, this site instantly recognized and logged me in! Unacceptable.

Is there a way to disable custom webkit scrollbars?, Unfortunately, the CSS cannot be "disabled" or reverted once activated: ::-webkit-​scrollbar cannot be simply overridden to get the default style, the only way to do  So, you’re designed a lovely website only to find out Apple’s iOS decides it wants to take the design into it’s control by styling your input fields i.e. adding rounded corners and dropshadows to text fields and input buttons.

  • why you can't use type=text?
  • You don't want to change type in the markup - are you open to change it programmaticaly?
  • As long as it fills my control with time and it works right in chrome and IE :). The only I have gotten it to is with type time. In other words I need a date picker and a time picker. I don't want to use the Trent control either.
  • Where were you two years ago?! :)
  • Lol, didn't have an account back then. Came here looking for an answer. Found your post and later found this solution. So posted it for future reference. :)
  • The input mask is still there in chrome... The buttons are gone but thats not the problem.