2

$(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]

2
  • No entendí nada en tu pregunta, deberías agregar mas información, por favor lee Cómo preguntar, saludos. Commented el 8 nov. 2018 a las 15:32
  • modifique la pregunta, gracias por corregirme.
    – Alexcertz
    Commented el 8 nov. 2018 a las 18:10

1 respuesta 1

0

Tienes algun error, en el script $ hace referencia a jQuery, no lo utilices para nombrar variables como si fuera php. Por otro lado, si utilizas change el color del relleno va a aparecer tras salir de un campo después de rellenarlo, mientras que el color de vacío solo aparecerá si se vacía un campo previamente rellenado, no aparecerá si no se rellena. Puedes probarlo en el ejemplo. Espero que te sirva

$(document).ready(function(){
$("input").change(function(){
    var spid = $(this).data("span");
    if ($(this).val()=="") {
         $(this).css("background-color", "#dedede");
         $("#"+spid).css("background-color", "#dedede");
    } else {
         $(this).css("background-color", "red");
         $("#"+spid).css("background-color", "red");
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="contactanos" action="" onsubmit="return Submit()" id="form">
                <div class="form__group">
                  <input class="form__input" type="text" id="name" placeholder="Nombre Completo" data-span="s1" required>
                  <span class="form-focus" id="s1">span1</span>
                </div>
                <div class="form__group">
                  <input class="form__input" type="email" id="email" placeholder="E-mail" data-span="s2" required>
                  <span class="form-focus" id="s2">span2</span>
                </div>
                <div class="form__group">
                  <input class="form__input" type="tel" id="phone" placeholder="Teléfono" data-span="s3" required>
                  <span class="form-focus" id="s3">span3</span>
                </div>
<div class="form__group">
                  
                </div></form>

9
  • Gracias Carmen por responder, aunque en realidad no era solo cambiar el color del input, quiero agregar color al span, que aca no se ve en el preview, pero si existe. ( pero podria definirlo como que deseo agregar color a cada span que acompaña a cada input, cada vez que tenga un texto el input que ese elemento "span" cambie de color, la broma es que si lo logro hacer, pero me cambia todos los span del formulario y no individualmente como el input lo hace. gracias. ) espero me entiendas jeje.
    – Alexcertz
    Commented el 8 nov. 2018 a las 16:54
  • Tendrías que darle un id a cada span que lo relacione con el input, por ejemplo puedes darle a cada input un data-span con el valor del id del span y recoger ese valor del elemento data con $(this).data( "span"), de ese modo identificas el span correspondiente y varías el css
    – Carmen
    Commented el 8 nov. 2018 a las 17:02
  • voy a intentarlo, a ver si lo logro. gracias. eres una pro. espero hacerlo.
    – Alexcertz
    Commented el 8 nov. 2018 a las 17:11
  • quedaria asi: <input class="form__input" data-span:"span1" type="email" id="email" placeholder="E-mail" required> <span id="span1" class="form-focus"></span> y en js: $(document).ready(function(){ $("input").change(function(){ if ($(this).val()=="") { $(this).css("background-color", "#dedede");$(this).data("span"); } else { $(this).css("background-color", "red"); } }); }); quedaria asi? y como evalua el span1, span2, etc. para que sean independientes?
    – Alexcertz
    Commented el 8 nov. 2018 a las 17:13
  • @Alexcertz se identifica por el id del span, que tiene el mismo valor que el data-span correspondiente. He editado la respuesta para que lo veas funcionando.
    – Carmen
    Commented el 8 nov. 2018 a las 20:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.