Matching an empty input box using CSS

Question

How do I apply a style to an empty input box  If the user types something in the input field  the style should no longer be applied  Is this possible in CSS  I tried this   input value

User · Answer

If supporting legacy browsers is not needed, you could use a combination of required, valid, and invalid.

The good thing about using this is the valid and invalid pseudo-elements work well with the type attributes of input fields. For example:

_x000D_

input:invalid, textarea:invalid { _x000D_
    box-shadow: 0 0 5px #d45252;_x000D_
    border-color: #b03535_x000D_
}_x000D_
_x000D_
input:valid, textarea:valid {_x000D_
    box-shadow: 0 0 5px #5cd053;_x000D_
    border-color: #28921f;_x000D_
}

_x000D_

<input type="email" name="email" placeholder="[email protected]" required />_x000D_
<input type="url" name="website" placeholder="http://johndoe.com"/>_x000D_
<input type="text" name="name" placeholder="John Doe" required/>

_x000D_

For reference, JSFiddle here: http://jsfiddle.net/0sf6m46j/

User · Answer

There is no selector in CSS which does this  Attribute selectors match attribute values  not computed values   You would have to use JavaScript

User · Answer

I realize this is a very old thread  but things have changed a bit since and it did help me find the right combination of things I needed to get my problem fixed  So I thought I d share what I did   The problem was I nedded to have the same css applied for an optional input if it was filled  as I had for a filled required  The css used the psuedo class  valid which applied the css on the optional input also when not filled   This is how I fixed it   HTML   lt input type  text  required  required  gt   lt input type  text  placeholder    gt    CSS  input required valid              input optional  not  placeholder-shown

User · Answer

input edit-keys-1   blur function        tmpval     this  val        if tmpval                    this  addClass  empty              this  removeClass  not-empty          else             this  addClass  not-empty              this  removeClass  empty                in jQuery  I added a class and styled with css    empty   background none

User · Answer

Updating the value of a field does not update its value attribute in the DOM so that s why your selector is always matching a field  even when it s not actually empty   Instead use the invalid pseudo-class to achieve what you want  like so    x000D   x000D  input required   x000D    border  1px solid green  x000D    x000D  input required invalid   x000D    border  1px solid red  x000D    x000D   lt input required type  text  value    gt  x000D   x000D   lt input required type  text  value  Value  gt  x000D   x000D   x000D

User · Answer

It worked for me to add a class name to the input and then apply CSS rules to that    lt input type  text  name  product  class  product    gt    lt style gt  input value     product       display  none     lt  style gt

User · Answer

input value      input not  value     works with    lt input type  text    gt   lt input type  text  value      gt    But the style will not change as soon as someone will start typing  you need JS for that

User · Answer

I m wondered by answers we have clear attribute to get empty input boxes  take a look at this code    empty input   input empty      border-color  red      input with value   input not  empty       border-color  black      UPDATE  input  select  textarea       border-color   green       amp  empty           border-color   red            More over for having a great look in the validation   input  select  textarea        amp  aria-invalid  true             border-color  amber  important              amp  aria-invalid  false     amp  valid           border-color  green  important

User · Answer

In modern browsers you can use  placeholder-shown to target the empty input  not to be confused with   placeholder    input placeholder-shown       border  1px solid red     Red border only if the input is empty        More info and browser support  https   css-tricks com almanac selectors p placeholder-shown

User · Answer

This worked for me   For the HTML  add the required attribute to the input element   lt input class  my-input-element  type  text  placeholder    required   gt    For the CSS  use the  invalid selector to target the empty input  input my-input-element invalid        Notes     About required from w3Schools com   When present  it specifies that an input field must be filled out before submitting the form

User · Answer

If only the field is required you could go with input valid   x000D   x000D   foo-thing valid    msg   visibility  visible important          x000D    lt input type  text  id  foo-thing  required  required  gt  x000D    lt span class  msg  style  visibility  hidden   gt Yay not empty lt  span gt  x000D   x000D   x000D    See live on jsFiddle  OR negate using  foo-thing invalid  credit to  SamGoody

User · Answer

This question might have been asked some time ago  but as I recently landed on this topic looking for client-side form validation  and as the  placeholder-shown support  is getting better  I thought the following might help others   Using Berend idea of using this CSS4 pseudo-class  I was able to create a form validation only triggered after the user is finished filling it   Here is ademo and explanation on CodePen  https   codepen io johanmouchet pen PKNxKQ

User · Answer

If you re happy not not supporting IE or pre-Chromium Edge  which might be fine if you are using this for progressive enhancement   you can use  placeholder-shown as Berend has said  Note that for Chrome and Safari you actually need a non-empty placeholder for this to work  though a space works    x000D   x000D     x000D     after  x000D     before   x000D    box-sizing  border-box  x000D    x000D   x000D  label floating-label   x000D    display  block  x000D    position  relative  x000D    height  2 2em  x000D    margin-bottom  1em  x000D    x000D   x000D  label floating-label input   x000D    font-size  1em  x000D    height  2 2em  x000D    padding-top  0 7em  x000D    line-height  1 5  x000D    color   495057  x000D    background-color   fff  x000D    background-clip  padding-box  x000D    border  1px solid  ced4da  x000D    border-radius  0 25rem  x000D    transition  border-color 0 15s ease-in-out  box-shadow 0 15s ease-in-out  x000D    x000D   x000D  label floating-label input focus   x000D    color   495057  x000D    background-color   fff  x000D    border-color   80bdff  x000D    outline  0  x000D    box-shadow  0 0 0 0 2rem rgba 0  123  255  0 25   x000D    x000D   x000D  label floating-label input span   x000D    position  absolute  x000D    top  0em  x000D    left  0  x000D    display  block  x000D    width  100   x000D    font-size  0 66em  x000D    line-height  1 5  x000D    color   495057  x000D    border  1px solid transparent  x000D    border-radius  0 25rem  x000D    transition  font-size 0 1s ease-in-out  top 0 1s ease-in-out  x000D    x000D   x000D  label floating-label input placeholder-shown   x000D    padding-top  0  x000D    font-size  1em  x000D    x000D   x000D  label floating-label input placeholder-shown span   x000D    top  0 3em  x000D    font-size  1em  x000D    x000D   lt fieldset gt  x000D     lt legend gt  x000D      Floating labels example  no-JS  x000D     lt  legend gt  x000D     lt label class  floating-label  gt  x000D       lt input type  text  placeholder     gt  x000D       lt span gt Username lt  span gt  x000D     lt  label gt  x000D     lt label class  floating-label  gt  x000D       lt input type  Password  placeholder     gt  x000D       lt span gt Password lt  span gt  x000D     lt  label gt  x000D   lt  fieldset gt  x000D   lt p gt  x000D    Inspired by Bootstrap s  lt a href  https   getbootstrap com docs 4 0 examples floating-labels   gt floating labels lt  a gt   x000D   lt  p gt  x000D   x000D   x000D

[css] Matching an empty input box using CSS

Examples related to css

Examples related to input

Examples related to css-selectors