1

me gustaría cambiar cambiar el color del label al hacer foco en el textarea, pero no consigo hacerlo, actualmente utilizo las siguientes líneas en CSS

<div class="col-12">
    <label class="label-admin" for="comentarioOpcional">Comentario Opcional</label>
    <textarea class="form-control textarea-admin" name="comentarioOpcional" id="comentarioOpcional" cols="30" rows="10"></textarea>
</div>

.textarea-admin{
      resize: none;
      border: none;
      border-radius: 0;  
      border: none;
      border-bottom: solid 3px #AEAEAE;
      background-color: #EFEFEF;
      /* transition: all 0.3s cubic-bezier(.64,.09,.08,1);
      background: linear-gradient(to bottom, rgba(255,255,255,0) 99%, #B91817 1%);
      background-position: -100vw 0;
      background-size: auto 100%;
      background-repeat: no-repeat; */
}
.textarea-admin:hover ~ .label-admin{
    color: aqua important;  
}

Estaría agradecido de su ayuda

2 respuestas 2

2

Otra manera usando javascript

Agregue los eventos onfocus="changeLabelBgColor()" y onblur="restoreLabelBgColor()" al tag <textarea> y en el script se realiza el cambio de color.

.textarea-admin{
      resize: none;
      border: none;
      border-radius: 0;  
      border: none;
      border-bottom: solid 3px #AEAEAE;
      background-color: #EFEFEF;
      /* transition: all 0.3s cubic-bezier(.64,.09,.08,1);
      background: linear-gradient(to bottom, rgba(255,255,255,0) 99%, #B91817 1%);
      background-position: -100vw 0;
      background-size: auto 100%;
      background-repeat: no-repeat; */
}
.textarea-admin:hover ~ .label-admin{
    color: aqua important;  
}
<div class="col-12">
    <label class="label-admin"  for="comentarioOpcional">Comentario Opcional</label>
    <textarea class="form-control textarea-admin" onfocus="changeLabelBgColor()" onblur="restoreLabelBgColor()" name="comentarioOpcional" id="comentarioOpcional" cols="30" rows="10"></textarea>
</div>

<script>
const label = document.querySelector(".label-admin")

function changeLabelBgColor(){
  label.style.backgroundColor = "#05d" //CAMBIAR EL COLOR QUE DESEA
}

function restoreLabelBgColor(){
  label.style.backgroundColor = ""
}
</script>

0

Esto no se puede solo con CSS. si estás usando jQuery, te ayudo con eso:

$(document).ready(function() {

 $(".form-control").on("mouseover",function(){
  $(".label-admin").css({"color": "red"})
 });
 
 $(".form-control").on("mouseleave",function(){
  $(".label-admin").css({"color": "inherit"})
 })

)};

Esta función solo hover. Pero si prefieres que no sea así, se puede cambiar mouseover por click. Y una cosa más: en tu CSS te faltó el signo: ! Así:

color: aqua !important;

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.