Question

我正在尝试创建类似于聚合物this的浮动标签。在字段内输入时，占位符会隐藏。

.numbrFldCls input::-webkit-input-placeholder {
  transition: all 0.3s ease-in;
  opacity: 1 !important;
  -webkit-text-fill-color: red !important;
  visibility: visible !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.numbrFldCls input::-webkit-input-placeholder*[hidden] {
  display: inline-block;
  opacity: 1 !important;
  visibility: visible !important;
}
.numbrFldCls input:hover::-webkit-input-placeholder,
.numbrFldCls input:focus::-webkit-input-placeholder {
  color: red !important;
  -webkit-text-fill-color: red !important;
  -webkit-transform: translate3d(0, -16px, 0);
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 12px !important;
  position: relative;
}

Answer 1

这将避免自动隐藏

 input:focus::-webkit-input-placeholder {
              display:block !important;
            }

Answer 2

占位符文字只是占位符文本，它将会消失。一旦你开始打字。这就是它应该做的事情。

在大多数情况下，您确实不应该使用占位符属性而不是<label>元素。它们用于不同的目的。标签用于指示表单元素的作用。占位符更多地暗示了预期的信息类型。

Answer 3

您可以在单独的div或span中创建占位符文本，并使用margin将其对齐到输入字段的顶部，并相应地更改焦点。

占位符动画css在按键上隐藏

3 个答案: