$(function(){
$('.contactanos :input')
.change(function(){
var $input = $(this);
var $span = $('.form__input-focus');
if ($input.val() === '')
{
$input.css("background-color", "#fff");
$(this).data("span").css("background-color", "transparent");
}
else
{
$input.css("background-color", "#000");
$(this).data("span").css("background-color", "grey");
}
});
});
<style>
.form__input:focus+.form__input-focus {
background-color: #63E2FF
}
.form__input {
display: block;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 20px;
font-size: 14px;
padding: 9px 20px 7px;
line-height: 20px;
letter-spacing: 1px;
width: 100%;
box-sizing: border-box;
resize: vertical;
background-color: transparent;
background-size: 13px;
background-position: top 13px right 10px;
background-repeat: no-repeat;
font-weight: 400;
color: #FFF;
transition: all .25s ease-in-out
}
.form__input:-moz-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}
.form__input::-moz-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}
.form__input:-ms-input-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}
.form__input::-webkit-input-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}
.form__input:-webkit-autofill {
color: #000
}
.form__input:focus {
border: 2px solid #fff
}
.form__input {
background-color: transparent;
background-image: url(../images/select-tip.svg);
background-size: 13px;
background-position: top 15px right 16px;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.form__input-focus {
position: absolute;
top: 10px;
left: -40px;
width: 20px;
height: 20px;
border: 2px solid #63E2FF;
border-radius: 50%;
background-color: trasparent;
transition: all .25s ease-in-out
}
</style>
<form class="contactanos" action="" onsubmit="return Submit()" id="form">
<div class="form__group">
<input data-span="span1" class="form__input" type="text" id="name" placeholder="Nombre Completo" required>
<span id="span1" class="form-focus"></span>
</div>
<div class="form__group">
<input data-span="span2" class="form__input" type="email" id="email" placeholder="E-mail" required>
<span id="span2" class="form-focus"></span>
</div>
<div class="form__group">
<input data-span="span3" class="form__input" type="tel" id="phone" placeholder="Teléfono" required>
<span id="span3" class="form-focus"></span>
</div>
<div class="form__group">
<textarea data-span="span4" class="form__input" id="body" rows="8" cols="80" placeholder="Mensaje" required></textarea>
<span id="span4" class="form-focus"></span>
</div>
</form>
en la imagen el circulo a la izquierda es el span, al hacer clic en el input y escribir tiene efecto focus y se rellena de ese color, pero al quitar el clic y pasar a otro se desaparece. y lo que quiero saber es como hacer para que se quede relleno si esta escrito algo y si esta vacio quede como antes.
[![introducir la descripción de la imagen aquí][1]][1]