如何过渡PrimeFaces outputlabel

Question

我想让PrimeFaces像outputlabel和inputtext一样成为Google用户输入。当我为html执行以下示例时，我没有遇到任何问题，当我想为PrimeFaces实现它时，它根本不起作用。我该如何解决这个问题？

问题在下面更清楚地显示

尽管第一个输入文本尚未聚焦

但是第二个输入文本标题出现在中间

这是我遇到麻烦的地方。

预先感谢您的帮助。

body {
  font-family: sans-serif;
}

.label-before, .field input:valid + label::before, .field input:focus + label::before {
  line-height: 20px;
  font-size: 12px;
  top: -10px;
  background: #fff;
  padding: 0 6px;
  left: 9px;
}

.container {
  width: 80%;
  margin: 30px 10%;
}

.field {
  position: relative;
  margin-bottom: 15px;
}
.field label::before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 15px;
  line-height: 40px;
  font-size: 14px;
  color: #777;
  transition: 300ms all;
}
.field input {
  width: 100%;
  line-height: 40px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.field input:focus {
  outline: 0;
  border-color: blue;
}
.field input:valid + label::before {
  content: attr(data-title);
}
.field input:focus + label::before {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container">
<div class="field">
    <input type="password" required autocomplete="off" id="password">
    <label for="password" title="Şifrenizi girin" data-title="Şifre"></label>
</div>
    
</div>

Answer 1

我使用jQuery浮动占位符文本插件-占位符标签解决了我的问题 谢谢