Kevin Powell - Community•2w ago

select input with empty value using css

HI guys, I want to select an input element which is empty by using css. I tried :valid and required attribute. But the field is optional, I wonder is there other ways to select the input with empty value?

div:has(input:empty) p{
// do something
}
<input required />

div:has(input:empty) p{
// do something
}
<input required />

22 Replies

ἔρως•2w ago

[value=""] should do the trick also, add :not([value]) in case the attribute doesnt exist at all too

Jochem•2w ago

that won't update if someone fills a value in

ἔρως•2w ago

so, your selector could be something like: div:has(input[value=""], input:not([value])) 🤔 i have an idea

Jochem•2w ago

the best solution is probably a change event in javascript there's a :blank selector, but it's only a proposal and not super likely to have good support any time soon (it's 0% right now)

ἔρως•2w ago

div:has(input[value=""]:invalid, input:not([value]):invalid) wait a minute are you trying to style the parent to show an error/success?

empty•2w ago

I want to style the p element

<div>
     <input/>
     <p></p>
</div>

<div>
     <input/>
     <p></p>
</div>

Jochem•2w ago

Your best bet is JavaScript https://codepen.io/jochemm/pen/yLmVKmj

Jochem

CodePen

Highlight empty values

...

ἔρως•2w ago

why dont you use input:user-invalid + p? with the required attribute?

Jochem•2w ago

the fields are optional

ἔρως•2w ago

🤔 forgot that detail so, wait a second the field is optional but you want to match it when it is empty?

Jochem•2w ago

Also, just to clarify from your original, :empty is only empty in the sense of the DOM. It selects elements without any child elements, which includes text nodes. It has nothing to do with form elements

ἔρως•2w ago

just a clarification: :empty now is supposed to ignore whitespace-only text nodes also, i solved the problem set the pattern property to [^\s\S]{0}, and use :user-invalid to style the p you will have to hide the validation errors and submit the form in js, but it should work wait, thats a terrible solution... 🤔 let me brian more

Jochem•2w ago

I'd say it's much better to apply the (non-critical) styles with JS, rather than replacing a critical function like submitting with JS

ἔρως•2w ago

I FOUND A SOLUTION!!!! :placeholder-shown if there is placeholder text, and the input doesnt have a value, it selects the inout inout input supported since chrome 47, from 2015 https://jsfiddle.net/ue9np4mk as soon as you type anything, the <p> loses the blue color also, the placeholder can be just a space, if you dont want to show anything

Jochem•2w ago

https://codepen.io/jochemm/pen/LYwbmyV Works like a charm, even with an empty placeholder

Jochem

CodePen

Placeholder

...

ἔρως•2w ago

and it works the same

Jochem•2w ago

on firefox at least you just have to have a placeholder attribute

ἔρως•2w ago

i would put a space, just to avoid weirdness yup i knew there was a solution!