how to transition PrimeFaces outputlabel

Question

I want to make PrimeFaces like outputlabel and inputtext i like Google user input. When I do the following example for html, I don't encounter any problems, it just doesn't work when I want to implement it for PrimeFaces. How can I solve this problem?

The problem appears more clearly below

Although the first inputtext is not yet focus

But the second inputtext title appears in the middle

This is where I'm having trouble.

Thank you in advance for your help.

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>

_"Google user input"_ changes every year... And indeed, what is not working? Why the PF inputText and not a plain jsf one (that produces a plain html one)... Sounds like an overly complex thing to do — Kukeltje, Jan 27 '19 at 21:12
Don't load your own jQuery: https://stackoverflow.com/questions/16166039/adding-jquery-to-primefaces-results-in-uncaught-typeerror-over-all-place — Jasper de Vries, Jan 28 '19 at 11:01
@JasperdeVries There is no problem with the console. It just doesn't look like the example — Ömer Faruk Kurt, Jan 28 '19 at 11:50
Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Jasper de Vries, Jan 28 '19 at 11:57
my problem is not override css. How do I adapt sample css i primefaces. I hope I can explain my problem @JasperdeVries — Ömer Faruk Kurt, Jan 28 '19 at 15:04
Hey, I'm just trying to help here.. I'm surprised to see downvotes on some of my older questions. FYI I did not downvote yours. Please read [ask] and provide a [mcve] so we can help you further. — Jasper de Vries, Jan 28 '19 at 15:26
I did not do. I'm just looking for the answer to my question. — Ömer Faruk Kurt, Jan 28 '19 at 15:34
I did not downvote either, but as it now stands, the question and answer are not very useful. And @JasperdeVries is right, the basic question is about overriding PrimeFaces CSS! But like stated, **why do you want to override the PF controls if for this case you could use the basic JSF controls wihout much hashle**. Adding a `jsf:id` to the controls and declaring the namespace would have most likely make it work for you. Overly complex solution now.... Sorry — Kukeltje, Jan 28 '19 at 16:35

score 0 · Answer 1 · answered Jan 28 '19 at 16:25

0

I solved my problem with the jQuery Floating Placeholder Text Plugin - Placeholder Label Thanks

answered Jan 28 '19 at 16:25

Ömer Faruk Kurt

500
3
14

how to transition PrimeFaces outputlabel

1 Answers1