Question

我可以在<input type="time"/>

中使用占位符吗？

Answer 1

是的，你可以

占位符属性指定一个描述输入字段预期值的简短提示

它取决于浏览器对

的行为方式

<input type="time"/>

例如铬显示

--:-- --

by defualt但firefox显示您设置的占位符值

点击此处：

jsfiddle

Answer 2

如果在输入中添加id或类，则可以使用：before将文本添加到输入type =“ time”字段中。

例如：

HTML：

<input type="time" id="timepicker">

CSS：

#timepicker:before {
content:'Time:';
margin-right:.6em;
color:#9d9d9d;
}

Answer 3

理想情况下，你不能。但如果你这样做，它就不会在IE和firefox浏览器中工作，因为它们不支持<input type="time">。因此，您将使用您提供的占位符将它们视为<input type="text">。

    http://www.w3schools.com/html/html5_form_input_types.asp

Answer 4

占位符不适用于输入类型时间，但是您可以预填充数据。

Just time:
<input type="time" value="13:00" step="900">

Answer 5

我建议将焦点的输入类型从文本更改为时间。是的，这是一种有点hacky的方式，但它有效。应用正确的样式，你会得到结果

Just time:
<input type="text" placeholder="Demo time" step="900" onfocus="this.type='time'">

主要区别在于在这种情况下使用 required 属性才能使用 css 选择器

input[type="time"]:not(:valid):before {
  content:'Time:';
  margin-right:.6em;
  color:#9d9d9d;
}

<input type="time" required />

Answer 6

小 css 技巧 :P

input[type="time"] {
    background: #fff;
    height:30px;
    min-width: 150px;
}

input[type="time"]:before {
    content: 'My Placeholder';
    color: #9d9d9d;
    position: absolute;
    background: #fff;
    height: 18px;
}

input[type="time"]:hover:before {
    content: '';
}

<input type="time"  />

我可以在<input type =“time”/>中使用占位符

6 个答案: