Css 保持输入占位符始终可见

我正在尝试为我的网站中的所有输入设置样式，当它们有值或有焦点时，palceholder将成为输入的标题（它移动到输入的顶部），但浏览器的默认行为会在有数据时隐藏占位符

我真的想远离JS解决方案

目前的结果：

我的css：

input:focus::-webkit-input-placeholder {
    transform: translate(-1rem,calc(-100% - 0.8rem));
    font-size: 0.9rem !important;
    opacity: 1 !important; //this doesnt seem to keep the placeholder visible
    display:block !important; //this doesnt seem to keep the placeholder visible
}

input::-webkit-input-placeholder{
    display:block !important; //this doesnt seem to keep the placeholder 
    opacity: 1 !important;  //this doesnt seem to keep the placeholder 
  } 

---

仅使用占位符是无法完成的。这是样品

正文{
填充：25px 10px
}
* {
保证金：0
}
外野手{
位置：相对位置；
利润率：0.30px0；
字体系列：影响；
字号：16px
}
.fieldOuter输入{
填充：10px；
宽度：250px；
过渡：所有1；
边框：2个实心#999；
字号：17px；
颜色：#666
}
.fieldOuter标签{
位置：绝对位置；
左：0px；
排名：0；
线高：15px；
过渡：均为0.5s；
溢出：隐藏；
颜色：#999；
空白：nowrap；
z指数：1；
不透明度：0；
}
.fieldOuter输入：焦点+标签{
不透明度：1；
顶部：-18px；
}
.fieldOuter输入：焦点{
大纲：无；
边框颜色：rgba（82,168,236,0.8）；
}

名称
姓

您的解决方案目前只适用于基于webkit的浏览器（只是为了确保您知道）--您确定不能让JS脚本这样做吗？您可以将占位符放入

标记中，并使用cssI将其放置在输入上。cssI也使用了非webkit浏览器选择器，但为了保持整洁，在我的帖子中我忽略了这些。不过，使用图例元素可能会有所帮助。只需使用标签元素而不是占位符属性。您应该对标签进行额外的样式设置，使其看起来像占位符