Placeholder position when input has text - css

Question

How to do placeholder styling when Input Text are focus, the placeholder are still visible and the font-size become smaller. For example like this:
I only need webkit support. Does webkit support such thing?

Answer 1

.input {
width: 200px;
height: 35px;
outline:0;
padding:0 10px;
}
.label { position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
input:focus ~ .label,
input:not(:focus):valid ~ .label{
top: 10px;
bottom: 5px;
left: 20px;
font-size: 12px;
}
<div>
<input type="text" class="input" required/>
<span class="label">Company Name</span>
</div>

Answer 2

You need to use a label element and modify it accordingly. Try this:
function fillClass() {
if ($(this).val() != '')
$(this).parent().addClass('input--filled');
else
$(this).parent().removeClass('input--filled');
}
$(".sign-in-input").focusout(fillClass);
.sign-in-input-ctr {
width: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: 25px;
position: relative;
margin-top: 50px;
}
.sign-in-input {
width: 100%;
border: 2px solid transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
height: 38px;
background-color: #fff;
outline: none;
border: 1px solid rgba(73, 73, 73, 0.2);
border-radius: 2px;
padding-left: 10px;
}
.sign-in-input:focus,
.input--filled .sign-in-input {
background-color: transparent;
border: 1px solid #a09e9e;
}
.sign-in-label {
width: 100%;
font-size: 12px;
position: absolute;
top: -18px;
pointer-events: none;
overflow: hidden;
padding: 0 15px;
left: 0;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.sign-in-input:focus+.sign-in-label,
.input--filled .sign-in-label {
-webkit-transform: translate3d(-15px, 0, 0);
transform: translate3d(-15px, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-in-input-ctr">
<input class="sign-in-input" type="text" name="email">
<label class="sign-in-label" for="signin-email"><span class="input-label-content">Email</span>
</label>
</div>

Answer 3

//------ contact us dropdown list
$(document).ready(function(){
$( ".form-group .form-control" ).focus(function() {
$(this).parent().addClass('inputFous');
}).blur(function() {
if($.trim($(this).val()) == '')
{
$(this).parent().removeClass('inputFous');
}
});
});
I think there is no webkit support for this, please check this code which will help you:- Jsfiddle