Question

我设法将占位符加上dd / mm / yyyy放在一起。当我单击以键入或选择日期时，该框将重置为其默认状态。诸如填充，宽度和颜色之类的样式会消失，但是当我在框外单击时，它将恢复为默认状态，并且样式保留在适当的位置。我希望在选择日期时保持不变。请帮助。

input {
  border: 1px solid #ecf0f1;
  color: #00A79D;
}

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.3em;
  padding: 11px;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

input[type="date"]:focus:before {
  content: '' !important;
  color: #00a79d;
}

<div class="col-sm gutters-19">
  <div class="form-group">
    <div class="form-select-custom">
      <input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
    </div>
  </div>
</div>

Answer 1

此样式content: '' !important;引起了问题：

input[type="date"]:focus:before {
  content: '' !important;   /* THIS IS THE PROBLEM */
  color: #00a79d;           /* This is ok */
}

您要删除所有内容（即占位符“ Departure”），这就是添加宽度和填充的原因。

仅供参考，您也在复制input[type="date"]:before规则，我将它们合并为一个。

已删除该行的代码段，您可以看到它正在工作：

input {
  border: 1px solid #ecf0f1;
  color: #00A79D;
}

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
  padding: 11px;
}

input[type="date"]:focus:before {
    color: #00a79d;
}

<div class="col-sm gutters-19">
  <div class="form-group">
    <div class="form-select-custom">
      <input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
    </div>
  </div>
</div>

Answer 2

只需设置输入标签的宽度和高度

input{
height: 39px;
width: 237px;
}

Answer 3

您不应该在输入日期元素上使用::before，因为它很大程度上取决于浏览器
您的样式不会消失：您使::before消失，这就是在输入内容中留出空间的原因。因此，您的输入自然会缩小。只需播放您的input[type="date"]:focus::before内容，您就会明白我的意思。
未经测试，但是您可以通过使用:empty状态来避免使用JavaScript toggleClass。 https://developer.mozilla.org/fr/docs/Web/CSS/:empty

输入日期占位符

3 个答案: