In the last update of Chrome ("23.0.1271.64 m" in my case), it seems that input=time now includes seconds that are inactive and not clickable. This doesn't look nice in our site so I want to know if someone have found a way to remove seconds. Unfortunately jsfiddle is down and I can't post an example there, but I post it here so people can read it anyway.
<html>
<head></head>
<body>
<input type="time" value="00:44" name="tiiiiden"/>
</body>
</html>
Since seconds is only "lying there" and are not editable, it's possible that this is a bug and it will be fixed pretty soon.
I know this is a very old question, but I just found the solution.
You must change your step to 60. If you leave your step default (1), it will have to increase one second, so it must show seconds at the field.
If you set your step to 60, it will increase 1 minute at a time, so it doesn't need to show the seconds.
@hend's solution of setting step
to 60 works on an empty input, but if you load your form with values prepopulated, you'll find that seconds may reappear in a disabled state.
You can mask them and the dangling colon with the following CSS:
::-webkit-datetime-edit-second-field {
background: $color-white;
color: transparent;
margin-left: -3px;
position: absolute;
width: 1px;
}
Which yields the following:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With