Change border color of parent div if child input is focused

I know TailwindCSS have class group to use but that is only use for change styles of child element when the parent element activate some event, but I want it in vise versa.

<div > <!-- border color should be red when child is focused -->
  <img >
  <input  type="text">
</div>

And I don't want to re-write css classes. Just use TailwindCSS.

CodePudding user response：

Use focus-within variant

<!-- border will be red when input focuesd -->
<div >
  <img >
  <input  type="text">
</div>

DEMO

CodePudding user response：

You could use JavaScript for that. I assume your input gets focused by clicking. You can catch the click argument and add a class to the parent.

<input  type="text" onclick="focusFunction()">

<script>
function focusFunction() {
    document.getElementByClass("parent").classList.add("focusclass");
}
</script>

Everytime you click the Input, your focusFuncition is called. This function searches for the parent class and adds the focusclass to the class attribute. Of course you can change the naming of the classes.

Maybe you have to give your parent an unique id to select it with getElementByID instead of class if you use the parent class more than once.