即使输入了值，输入字段占位符值如何保持（字段没有标签）

Question

我试图保留输入字段的占位符，当焦点对准时它可以工作，但是当输入包含值时，占位符消失。任何想法如何做到这一点？

Fiddle :

<input type="text" placeholder="Input some text">

样式表

input:focus::-webkit-input-placeholder{
    color: #202020;
    font-size: 10px;
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
    visibility: visible !important;
    opacity: 1
    padding:3px;
}

input{
    height: 45px;
    border: 1px solid #1b1a1a;
    width: 350px;
    padding: 10px;
}

Answer 1

仅使用占位符文本是无法实现您的要求的。浏览器将按设计隐藏占位符文本，您对此无能为力。

我已经提出了一个建议，即使用标签元素和一些简单的CSS在不使用占位符的情况下实现相同的结果。

https://jsfiddle.net/AshwinPrabhuB/u9kjdgfL/

input
{
  border: 1px solid #1b1a1a;
    width: 350px;
  padding: 10px;
}

input + label
{ 
  position: absolute; 
  left: 18px; 
  top: 18px;
  transition: 0.5s ease;
  color: grey;
  font-size: 0.9em;
 }

 input:focus + label
 {
   right: 100px;
   display: block;
   top: 5px;
 }

 input:valid+ label
 {
  top: 5px;
 }

<input id="ip" type="text" placeholder="" required="">
<label for="ip">Input some text</label>