Select label only if input is empty and not focused?

Question

I want to select a label in CSS only when input has no focus and value is '' (empty string)

.email label:not(input[value='']:not(input:focus) ~ label) {
  color: green;
}

<div class='email'>
  <label for='email'>Email</label>
  <input type='email' id='email' value={email} onChange={handleEmail} />
</div>

Selecting a previous sibling in CSS is only possible with the pseudo class `:has()` which at time of writing is [only supported by Safari](https://caniuse.com/css-has) — Zach Jensz, Apr 27 '22 at 05:27
@ZachJensz I am able to select previous sibling with above CSS, but I want to select it only when input input is not focused and value=''. — Aman Ghanghoriya, Apr 27 '22 at 05:32
The subsequent sibling combinator cannot select **previous** siblings, only siblings that come after — Zach Jensz, Apr 27 '22 at 05:38

Zach Jensz · Accepted Answer · 2022-04-27T05:56:24.990

Selecting a previous sibling in CSS is only possible with the :has() pseudo class which at time of writing is only supported by Safari

Your current selector:

.email label:not(input[value='']:not(input:focus) ~ label)

Has syntactically incorrect parentheses, but if we fix that:

.email label:not(input[value='']):not(input:focus) ~ label

It selects all labels that come after a label that is not an input with value='', that is also not a focused input, which are all descendants of an element with class .email.

Here is how you would implement the selector you want with has():

label:has(+ #email:not(input[value='']:not(input:focus)) {
  color: green;
}

<div className='email'>
  <label htmlFor='email'>Email</label>
  <input type='email' id='email' value={email} onChange={handleEmail} />
</div>

Here is a JavaScript polyfill that you might want to use in the meantime.

Other than that, one possible hack you could use that may or may not be terrible for screenreaders etc. is to reverse the markup and order it back with CSS:

#email:not(input[value='']):not(input:focus)+label {
  color: green;
}

.email {
  width: fit-content;
  display: flex;
  flex-flow: row-reverse wrap;
}

<div class='email'>
  <input type='email' id='email' value={email} onChange={handleEmail} />
  <label htmlFor='email'>Email</label>
</div>

score 1 · Answer 2 · answered Apr 27 '22 at 06:00

1

You can make life a little easier (since :has support is currently not so great). First, place the input before the label Then, to preserve your original formatting, declare your parent email div as a flex container and reverse its flex row direction.

CSS

.email {
  display: inline-flex;
  flex-direction: row-reverse;
  column-gap: 0.35rem;
}

input[value=""]:not(:focus) + label {
  color: red;
}

JSX

<div className="email">
  <input type="email" id="email" onChange={handleEmail} />
  <label htmlFor="email"> Email </label>
</div>

CodeSandbox example

answered Apr 27 '22 at 06:00

Andy Hoffman

18,436
4
42
61

I think I beat you to this one :P do you know if it's bad for screen readers or not? I've heard changing the order through styling only is dangerous for certain applications – Zach Jensz Apr 27 '22 at 06:06
2

@ZachJensz Swapping the `label` and `input` positions results in perfectly semantic and valid `HTML`. Also, `label`s are not focusable (without `tabindex` changes) and would not pose a a screen-reader issue. – Andy Hoffman Apr 27 '22 at 06:11

Select label only if input is empty and not focused?

2 Answers2

Linked