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

我正尝试创建类似聚合物this的浮动标签。在字段内输入时，占位符变得隐藏。占位符动画css正在隐藏按键

.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; 
}

来源

2015-10-20 RED.Skull

占位符文本就是那个占位符文本，一旦你开始输入，它就会'消失'。这就是它应该做的。

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

来源

2015-10-20 03:56:47 jarodtaylor

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

来源

2015-10-20 05:14:39 prem23

@ketan这是不相关？你仍然怀疑使用一段CSS代码占位符。它会工作。 –

@ RED.Skull所以，你应该接受任何一个答案。如果你的问题解决了。 – ketan

@ketan。感谢我自己找到解决方案。 –

这将避免自动隐藏

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

来源

2015-10-20 06:46:16

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

回答

相关问题