How to change container border based on child inputs placeholder state (tailwind)

I’m trying to set border color of a parent container which contains an input element when placeholder is not shown anymore – the closest working solution that i got was with focus-within but that isn’t ideal as i want for the border to stay colored even after focus is lost – depending on whether text is inserted.
I’m trying to achieve something similar like what i did with the label (you can see that in the code below) but instead of using peer i wish for it to look at children.

Currently the closest thing that i mangled together (not working) is has-[:not(:placeholder-shown)]:border-blue-500 as you can see the blue border is active immediately but it should activate only when text is inserted (placeholder not shown)

I’m trying to achieve this without any js

<html>

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="m-4">
  <!--Name input-->
  <div 
  class="group relative border-gray-900 border flex 
         px-[16px] py-[8px] h-[54px] 
         items-center 
         has-[:not(:placeholder-shown)]:border-blue-500">
         
    <input 
     id="name" 
     type="text" 
     placeholder="Name" 
     class="peer placeholder:text-gray-500 placeholder:text-base block outline-none" />
     
      <label 
       for="name" 
       class="absolute left-[16px] -top-2.5 bg-white px-1 text-sm text-gray-600 
              transition-all duration-300 peer-placeholder-shown:opacity-0 
              peer-placeholder-shown:top-[16px] 
              peer-[:not(:placeholder-shown)]:opacity-100 
              peer-[:not(:placeholder-shown)]:-top-2.5">
                            Name
          </label>
      
  </div>

</body>

</html>

Any help is much appreciated 🙂

You need to sign in to view this answers

Related Post