Keep input placeholder always visible

Question

I am trying to style all the inputs in my website in a way that when they have a value or have focus the palceholder becomes the title of the input (it moves to the top of the input) but the default behavior of the browser hides the placeholder when there is data on it.

I really want to stay away from JS solutions.

Current results :

My 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 
  } 

Answer 1

It cant be done using just the placeholder. Here is sample.

body {
  padding: 25px 10px
}
* {
  margin: 0
}
.fieldOuter {
  position: relative;
  margin: 0 0 30px 0;
  font-family: impact;
  font-size: 16px
}
.fieldOuter input {
  padding: 10px;
  width: 250px;
  transition: all 1s;
  border: 2px solid #999;
  font-size: 17px;
  color: #666
}
.fieldOuter label {
  position: absolute;
  left:0px;
  top: 0;
  line-height:15px;
  transition: all 0.5s;
  overflow: hidden;
  color: #999;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
}
.fieldOuter input:focus + label {
  opacity: 1;
  top: -18px;  
}
.fieldOuter input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
}

<div class="fieldOuter">
<input id="Name" placeholder="Name" type="text" />
  <label for="Name">Name</label>
</div>
<div class="fieldOuter">
<input id="LastName" placeholder="Last Name" type="text" />
  <label for="LastName">Last Name</label>
</div>