0

I have a situation I need a border to be applied to a div when the input it contains has text, I have this:

<div class= "parent" >
   <input placeholder = " ">
</div>

parent:hover :not(input:placeholder-shown){
 border: 2px solid $blue-two;
}

but the border is applied to the input and I need it to apply to the parent div, hope you can help me, thanks

Connell.O'Donnell
  • 3,603
  • 11
  • 27
  • 61
Luis
  • 1
  • As css is not made to find parent elements the traditional solution is a JS like @ferrandusqui31 suggested. If you like to play arround a little bit with css only you you can work with a special html construct which is a workarround to produces same/similar effect with css only. If interessted see: https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element – Brebber Feb 21 '21 at 22:50

1 Answers1

0

You can create a class that you won't use for any element and put there the styles of the border:

.parent_border{
        border: 2px solid $blue-two;
    }

and then with this javascript code when you edit the input revise if has something on it and add or remove the class to the parent:

input.addEventListener('change', revise); // You can also use keypress event
    function revise(){
        if(input.value !== ''){
            parent.classList.add('parent_border');
        }else{
            parent.classList.remove('parent_border');
        }
    }
ferrandusqui31
  • 1
  • 1