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

Question

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

http://jsfiddle.net/dDqX4/

I have found similar questions removing the webkit stuff.

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

Thanks!

Update:
Chrome enter image description here

IE
enter image description here

As you can see chrome breaks its.

You don't want to change type in the markup - are you open to change it programmaticaly? — Yuriy Galanter, Dec 06 '13 at 21:08
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. — Kevin Kohler, Dec 07 '13 at 01:55

score 7 · Accepted Answer · answered Oct 23 '15 at 19:11

7

Try this:

::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-week-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-text {
  color: transparent;
}

answered Oct 23 '15 at 19:11

Bartezz

474
4
13

Where were you two years ago?! :) – Kevin Kohler Oct 27 '15 at 17:17
2

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. :) – Bartezz Oct 27 '15 at 20:32

score 3 · Answer 2 · answered Dec 07 '13 at 12:50

3

input[type=time]::-webkit-clear-button,
input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    display:none;
}

http://jsfiddle.net/dDqX4/3/

answered Dec 07 '13 at 12:50

Michael Tempest

814
7
12

The input mask is still there in chrome... The buttons are gone but thats not the problem. – Kevin Kohler Dec 10 '13 at 15:04

score 0 · Answer 3 · answered Apr 02 '15 at 10:11

0

try this

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

input[type=time] {
    -moz-appearance:textfield;
}

answered Apr 02 '15 at 10:11

Rolwin Crasta

4,219
3
35
45

score 0 · Answer 4 · answered Dec 08 '18 at 18:24

0

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

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

answered Dec 08 '18 at 18:24

MColl

1

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

4 Answers4