0

Im currently trying to style a div container outside a parent when an input is not empty. Here is my code so far:

CSS:

  .container input:not(:placeholder-shown) > .contaienr label {
  margin-top: -11px;
}

HTML:

    <div class="container">
        <label id="floatingInput" class="text-white mt-[6px] ml-3 block z-0 absolute peer-focus:text-sm peer-focus:-mt-12 ease-in-out duration-150 peer-focus:z-20 peer-focus:bg-transpa after:z-20 after:content-[' '] after:absolute after:w-20 after:h-5 after:top-0 after:left-0">Enter your Password</label>
              <div class="big peer-focus:bg-blue-500 ease-in-out duration-150 overflow-visible">
                   <input placeholder=' ' type="password" id="password" class="peer z-10 relative form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-transparent outline-none" />
              </div>
    </div>

I want to adress the label in this example here, but I can't get it to work. I tried all selectors that are shown here (https://www.w3.org/TR/selectors-3/#selectors) but no success. The problem here is that the label tag is outside the big container, which contains the input. (And yes, I'm using a mix of Tailwind and normal css because you cant really do something so complex like this in tailwind afaik, pls dont rost me)

Any help is appreciated. Thank you in advance :)

UPDATE:
Made a jsfiddle for you guys to test (Line in question is in 70): https://jsfiddle.net/bendix_en/ocqzyf2t/52

Mr Brickstar
  • 188
  • 1
  • 5
  • 17
  • Can you make the example work in SO, so we can copy it? – SaroGFX Dec 05 '22 at 23:15
  • Just updated the question :) – Mr Brickstar Dec 06 '22 at 16:31
  • this selector `.container input:not(:placeholder-shown) > .container label` is trying mistakenly to address the segment `.container label` as direct child of the `.container input` and of course it's not the intended strategy. While I suppose you want to address the label sharing the same container as the input element. In css the only strategy I know so far to get there is using the `:has()` but it was introduced very recently and available on chrome >=105 – Diego D Dec 06 '22 at 16:45
  • for example this would work instead `.container:has(input:not(:placeholder-shown)) label ` but only on very few browsers and more importantly it doesn't support firefox – Diego D Dec 06 '22 at 16:48
  • Yeah thank you, I had a look at that method too but the limited browser support kinda turned me off... Anyways thank you for your help, I'll probably use js to do it than as putting the label into the same parent as the input doesn't work due to some bad styling – Mr Brickstar Dec 06 '22 at 21:55

0 Answers0