How do I create permanent placeholders? CSS / HTML - html

Question

I am working on a web form for my first official development job.
I am currently trying to make it so that my input fields placeholders don't disappear but instead i need them to shrink and move to the top of the input field.
I was able to find some code that should be getting the job done but is not.
Can anyone guide me on how to make this work?
Code I found: https://jsfiddle.net/p19j2nm5/
I've worked on this for hours trying all sorts of variations with no luck.
.wrapper /*wpcf7*/{
position:relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder{
position:absolute;
font-size: 25px;
pointer-events:none;
left: 1px;
top: 1px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 1px;
font-size: 11px;
}
HTML from contact form 7:
<label> First Name:
[text first-name placeholder "First Name"] </label>
<label> Last Name:
[text* last-name placeholder "Last Name"] </label>
<label> Your Email:
[email* your-email placeholder "Example#Example.com"] </label>
Currently, none on my fields placeholders move when focused, but removing "~.placeholder" does make the field shrink when focused.
Example of what I am trying to get my fields to do:

Answer 1

input:focus ~ .lastname_floating-label,
input:focus ~ .firstname_floating-label,
input:not(:focus):valid ~ .firstname_floating-label,
input:not(:focus):valid ~ .lastname_floating-label{
top: 2px;
left: 2px;
bottom: 2px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.firstname_floating-label, .lastname_floating-label {
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s ease all;
}
div{position:relative;}
<div>
<input type="text" class="inputText" required/>
<span class="firstname_floating-label">Firstname</span>
</div>
<div>
<input type="text" class="inputText" required/>
<span class="lastname_floating-label">Lastname</span>
</div>
Ok I changed according your request.
Other examples are wrong. Try to add more input and you can check that the place holder will be positioned in the first input. And than if you focus out the placeholder will cover the typed value.
Check this example if is ok using only HTML and CSS.

Answer 2

firstly to edit placeholders the selector you need to use is :placeholder. The effect you are trying to recreate is really just a trick with floating the form labels, instead of the placeholder text. There is a thorough explanation available here: https://css-tricks.com/float-labels-css/

Answer 3

If you look closely the jsfiddle example actually is not using a placeholder but a span tag with a class of .placeholder
Your own code has input placeholder attribute and you can target it and input :focus like this:
input::-webkit-input-placeholder {
color: #999;
font-size: 15px;
}
input:focus::-webkit-input-placeholder {
color: red;
font-size: 5px;
}
/* Firefox < 19 */
input:-moz-placeholder {
color: #999;
}
input:focus:-moz-placeholder {
color: red;
font-size: 5px;
}
/* Firefox > 19 */
input::-moz-placeholder {
color: #999;
}
input:focus::-moz-placeholder {
color: red;
font-size: 5px;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: #999;
}
input:focus:-ms-input-placeholder {
color: red;
font-size: 5px;
}
This will make placeholder text go smaller on input focus.

Answer 4

Updated Daebak Do's answer after reading your comment.
I added some padding to the input, and moved the "placeholder" content inside the input (changing top value from -12px to 2px and adding a left: 2px). I also added margin-top property to make the transition smooth and not disturb the rest of the content on your page.
Now the placeholder content is located inside the input box, like on the screenshot you shared.
.wrapper{
position: relative;
}
input {
font-size: 14px;
height: 40px;
transition: padding-top 0.1s, margin-top 0.1s;
margin-top: 15px;
}
.placeholder {
position: absolute;
font-size:25px;
pointer-events: none;
left: 3px;
top: 18px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 2px;
left: 2px;
font-size: 11px;
}
input:focus{
margin-top: 1px;
padding-top: 15px;
transition: padding-top 0.1s, margin-top 0.1s;
}
<div class="wrapper">
<input type="text">
<span class="placeholder">Placeholder</span>
</div>
<p>Some content.</p>